---
# System prepended metadata

title: '<strong style="color: blue; opacity: 0.80">**IHM PROJECT**</strong> :mortar_board:'

---

# <strong style="color: blue; opacity: 0.80">**IHM PROJECT**</strong> :mortar_board: 
## <span style="color:green "> 1.Project Presentation :computer:</span>
* <strong style="color:dark">this project is a School WebSite made with WORDPRESS.
 ## <span style="color:green">2.WORDPRESS</span>
 #### <span style="color:#0036ad"> 1.PRESENTATION: :point_down:</span>
 
 * <strong style="color:dark">WordPress is an open source Content Management System (CMS), which allows the
users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and allows updating, customizing and managing the website from its back-end CMS and components.
 *see also* [WORDPRESS](https://www.tutorialspoint.com/wordpress/wordpress_tutorial.pdf)


 ## <span style="color:green "> 4.How to install WordPress on Windows 10 (localhost).</span>
 
 * <strong style="color:dark">WordPress CMS can work on our computer. One of the main reasons for this is that in this way you can test WordPress before placing it on the server, or you can do the programming (creating themes, plugins…) and creation in WordPress without investment (FREE) in hosting, domain and accompanying services.
WordPress installed in this way will be fully functional and behave like any other site.

#### <span style="color:#0036ad"> Step 1: Download WordPress package for Windows – WordPress for Windows: :point_down:</span>

* <strong style="color:dark">Go to this page:[ click me]( https://go.microsoft.com/fwlink/?LinkID=286266)

* <strong style="color:dark">Click on the button Install WordPress. Save the package that will be offered.
![](https://i.imgur.com/CHZrLYb.png)

#### <span style="color:#0036ad">Step 2: Start the installation of WordPress
* <strong style="color:dark">Click twice on the package that you just downloaded.
![](https://i.imgur.com/0fjFScc.png)
* <strong style="color:dark">Allow this app to make changes to your PC, click on Yes (this is standard procedure when installing programs on Windows):
![](https://i.imgur.com/WaHuITz.png)
* <strong style="color:dark">In the window that opens (as in the picture beneath), click Install:
![](https://i.imgur.com/P5xqS8m.png)

#### <span style="color:#0036ad">Step 3: Define your database and password:
* <strong style="color:dark">Here you can select the database (if you are already on your computer). If the computer does not have a database installed, leave the default option on What type of database would you like to use? field (It will automatically install MySQL).
* <strong style="color:dark">Enter the new password, re-type and remember your password (or write it down somewhere)!
![](https://i.imgur.com/o9bQWfQ.png)
#### <span style="color:#0036ad">Step 4: Prerequisites for WordPress on Windows 10
* <strong style="color:dark">Here you will be shown what the application has to be installed. Check the box to agree to the terms (if you agree) and click I Accept to to continue.
![](https://i.imgur.com/SnnAoEV.png)
#### <span style="color:#0036ad">Step 5: Installation of dependencies
* <strong style="color:dark">The application will install all required dependencies automatically. It may take several minutes depending on the speed of your internet.
![](https://i.imgur.com/gyt4fzo.png)
#### <span style="color:#0036ad">Step 6: Configure
* <strong style="color:dark">In each of these fields, enter a unique phrase that will ensure the strength of your protection with authentication. Do not use single quotes, backlashes and dollar character. When you finish, click on Continue.
![](https://i.imgur.com/9dKQLLA.png)
#### <span style="color:#0036ad">Step 7: Finish
* <strong style="color:dark">Here you can see applications that are installed. To copy data about the database click on Copy to clipboard. Open Notepad and paste it. Save the text document somewhere. Click on Finish.
![](https://i.imgur.com/L1VuSsM.png)
#### <span style="color:#0036ad">Step 8: Finish WordPress installation in your browser
* <strong style="color:dark">The installation process will launch your browser to be the complete installation of WP. It looks just like the picture below. Approved language and click on Continue.
![](https://i.imgur.com/DjzJo56.png)
#### <span style="color:#0036ad">Step 9: Basic site and user info
* <strong style="color:dark">One more minute and it’ll be over. 🙂

Enter the title of the site (may be changed later).
Enter the name of the administrator, it is necessary for login to WP (double check and write somewhere aside).
Enter a password for the administrator (double check and write somewhere aside).
Enter an email address for the administrator (also double check).
Click on the Install WordPress to finish everything we started.
![](https://i.imgur.com/HQLVM7f.png)
* <strong style="color:dark">If you see a message like on the picture below that means you have successfully installed WordPress. Click on the Log In to log in into WP dashboard.
![](https://i.imgur.com/SXH0RBN.png)
#### <span style="color:#0036ad">10. Test & WordPress Dashboard
#### <span style="color:#0036ad">When you click on the Log In (picture above) you’ll see a login form on the WordPress dashboard. Enter the information you specified (username and password) in step 9 to login to the WP Dashboard.
![](https://i.imgur.com/2zEJYR5.png)
#### <span style="color:#0036ad">When you click on the Log In, you will be forwarded to the control panel:
![](https://i.imgur.com/YWlWpAt.png)

 ## <span style="color:green "> 4.Some captures of the most important things that every school website should contain.</span>
* ###### <strong style="color:orange; opacity: 0.80">Some Captures</strong>
![](https://i.imgur.com/aHqaIks.png)

> THE HOME PAGE OF OUR WEBSITE [color=#fd837b]
 ---
![](https://i.imgur.com/mQn8PdY.png)

> The home page [color=#fd837b]
 ---
 ![](https://i.imgur.com/SMSICby.png)

> The home page [color=#fd837b]
---
![](https://i.imgur.com/ElzgURv.png)
> The home page [color=#fd837b]
---
![](https://i.imgur.com/1oSBB8Y.png)
> The home page [color=#fd837b]
---
![](https://i.imgur.com/CKQWIj3.png)
> The Director's Pages [color=#fd837b]
---
![](https://i.imgur.com/X2gUs13.png)
> The Professors page [color=#fd837b]
---
![](https://i.imgur.com/ISR7gMp.png)
> The Professors page [color=#fd837b]
---
![](https://i.imgur.com/tf3FvLy.png)
> The branche of software engineering page [color=#fd837b]
---
![](https://i.imgur.com/2XXuBlb.png)
> The branche of Management Technics page [color=#fd837b]
---
![](https://i.imgur.com/Is3nzIy.png)
> The branche of agroenvironnement engineering page [color=#fd837b]
---
![](https://i.imgur.com/0TI5iQ4.png)
> The components of the sidebar[color=#fd837b]
---

![](https://i.imgur.com/JAaomWl.png)
> The components of the sidebar[color=#fd837b]
---

![](https://i.imgur.com/YMlEKDw.png)
> The components of the sidebar[color=#fd837b]
---

![](https://i.imgur.com/DPHsaqF.png)
> The static footer of the website which includes the accounts of ESTSB (Facebook and instagram and officiel site).[color=#fd837b]
---
![](https://i.imgur.com/AJyn7x6.jpg)
> a dropdown list of the branches that exist in ESTSB [color=#fd837b]
---
![](https://i.imgur.com/gIMGyaI.png)
> this text box for searching something in the pages
---
![](https://i.imgur.com/HqGRoOY.jpg)
> when someone searching for something
---
![](https://i.imgur.com/WQKpCmD.png)
> this is the result
---
* <strong style="color: dark ; opacity: 0.80">:pray: Finally we want say thank you to the one and only, our professor Mr BADDI YOUSSEF *Doctor Assistant in UCD* for his supporting  and encouraging to us, also for giving us this opportunity to improve our skills and to know new technologies as those giant ones that we worked on.

*see also about* Mr [BADDI](https://ma.linkedin.com/in/youssefbaddi/fr)
</strong>
 
> Created by :[name= ELMAJNI KHAOULA IMANE LAHLOU OUMAIMA HAIMAR]
[time=sun,2020,01,04][color=#EF0101]