Website Generator for SoftLabWebsite Generator for SoftLab

By Yohann SABBAH & Mikael V.H Cohen-Under the supervision of Viktor Kulikov-

Final Presentation

04/20/23

Goal of the projectGoal of the project

04/20/23

Abstract

• Designing a website generator for Technion Labs• Intuitive interface for • Website creation• Website administration

Goal of the projectGoal of the project

04/20/23

Some facts

A classy Technion lab website is always composed by the following types of elements:

• HTML basic page• Lists of people – As list of supervisors, list of professors…• Lists of projects proposal • Lists of finished projects• Lists of links

• Certain pages contain several different elements

Goal of the projectGoal of the project

04/20/23

Technion Lab Website principle

1. First, create Sub-pages:1. Choosing the type of each Sub-page2. Chose a name for each sub-page3. Can create many sub-pages of the same type

2. Then, create Pages – A page is composed of one or many sub-pages1. Choosing a name for each page2. Filling a page with one or many sub-pages

3. Now, we create our Website- A website is composed of one or many pages1. Choosing pages and their order

4. Finally, we fill the sub-pages with elements1. An element can be in many sub-pages

Goal of the projectGoal of the project

04/20/23

Used TechnologiesUsed Technologies

04/20/23

Used TechnologiesUsed Technologies

1. PHP recursive acronym for "PHP:Hypertext Preprocessor“

2. Widely-used Open Source scripting language3. Especially suited for Web development4. Used for producing dynamic web pages5. Can be embedded into HTML.

PHP - 1

04/20/23

Used TechnologiesUsed Technologies

1. PHP includes a large number of free and open source libraries

2. Real Object Oriented Programming Language3. Commonly install on Apache Server allow to

interact with Database like Mysql 4. PHP is mainly focused on server-side scripting

PHP - 2

04/20/23

Used TechnologiesUsed Technologies

PHP generally runs on a web server, taking PHP code as its input

and creating Web pages as output

PHP - Communication client-server

04/20/23

Used TechnologiesUsed Technologies

Smarty - 1

1. Smarty is a web template engine system written in PHP.

2. Allow separation between the Logic and the Presentation

3. Why templates ?1. Ease of design change2. Ease of interface localization3. Possibility to work separately on design and

code by different people at one and the same time

04/20/23

Used TechnologiesUsed Technologies

Smarty - 2 - Why Smarty ?

1. Very fast compare to other template engines

2. Creates PHP scripts from templates instead of parsing template

3. Smarty re-compiles templates only when make changes to them.

4. Caching : caches the output of the template contents. Saves from having to connect to the database every time your Web page is accessed.

04/20/23

Used TechnologiesUsed Technologies

MySQL

1. MySQL is a multithreaded, multi-user SQL database management system.

2. Popular for web applications.3. Closely tied to PHP.4. Allow all sort of queries.5. PhpMyAdmin: friendly user interface to

manage database develop on PHP.04/20/23

Used TechnologiesUsed Technologies

CCS

1. Cascading Style Sheets (CSS): style sheet language used to describe the presentation of a html document.

2. Define colors, fonts, layout, and other aspects of document

3. Why CSS? • more flexibility • control the specification of presentational

characteristics• reduce complexity and repetition in the

structural content.

04/20/23

Used TechnologiesUsed Technologies

Javascript

1. JavaScript is a scripting language most often used for client-side.

2. JS functions are embedded in HTML pages and interact with the Document Object Model (DOM) of the page

3. Respond to user actions quickly, making an application feel more responsive

4. Detect user actions which HTML alone cannot

04/20/23

Used TechnologiesUsed Technologies

Security

1. Administration is protected by username and password

2. Encryption using a MD5 provider that itself implements an algorithm based on a cryptographic hash function.

3. Used of Session and cookies

04/20/23

Database DesignDatabase Design

04/20/23

Sub-page “People”

04/20/23

DataBase DesignDataBase Design

List of Pages

04/20/23

DataBase DesignDataBase Design

04/20/23

OOP DesignOOP Design

04/20/23

OOP DesignOOP Design

SmartyClass

1. SmartyClass are responsible for: • read template • assign variables to the templates files• show template files (.tpl)

04/20/23

Page_header.tpl

Page_footer.tpl

Main

_menu.t

pl

MIDDLE PAGE CONTENT

OOP DesignOOP Design

Smarty Templates - 1

1. Page divided into many templates 2. Our template design: main_page.tpl

04/20/23

OOP DesignOOP Design

Smarty Templates - 2

1.Entity Page that represents a standard page 2.Entity Sub-Page represents by his template

file3.Each page is divided in a list of sub-pages

04/20/23

OOP DesignOOP Design

Other Classes

1. DBConnection: responsible for:• Connection / Disconnection to the Database • All the query to the DB

2.ConfigClass: responsible for:• Build a standard page: get all templates and

assign them to the main page template• Contain helpful functions that we use in

many PHP files.

04/20/23

TThe End…he End…

04/20/23

Thanks…..

Thanks to Victor for his help

Follow the guide for the demo