WEB PROGRAMMING II

CHAPTERS
 DEFINITION AND CONCEPT ON WEB
 INSTALLATION AND CONFIGURATION OF A WEB
SERVER(Wamp server/ EasyPHP)
 EVOLUTION AND DEFINATON OF INTERNET
 NOTION OF INTRANET,INTERNET AND EXTRANET
 PRESENTATION OF WEB DEVELOPMENT TOOLS
 APACHE PROJECTS
 DATABASE AND BASIC CONCEPT ON MySQL
 PHP LANGUAGE
Introduction

Web development refers to the creating, building, and

maintaining of websites. It includes aspects such as web design,
web programming, database management and web publishing.
It is the creation of an application that works over the internet
i.e. websites.
The web is a term which is used to refer to a collection of
different web pages is are accessible through uniform resources
identifier(URI Or URL) These web pages resides on a network of
web servers. A web server usually runs powerful scripting codes
serving clients requests which hit the server at a given port.
Therefore on web service are several ports which run and
supports particular services for the client computers. Web
pages are made available over the internet through HTTP
protocol (do not have SSL certificate) or using HTTPS (has SSL
certificate) which is a secure version of the hyper text transfer
protocol. There are many different types of website
development, including web design, web development,
and online marketing.
Web design is the process of creating a website from
start to finish. This includes coming up with the idea for
the website, designing the website's layout and graphics,
developing the website's content, and ensuring that the
website is accessible and user-friendly.
Web development is a broader term that refers to both
web design and online marketing. It encompasses
everything from creating a basic website to building an
online shopping platform or e-commerce store. Web
developers may also help you with SEO (search engine
optimization), social media management, and email
marketing campaigns.
Web Development Basics
In order to have a proper start in the area of web
development it is necessary to start and follow up with
the following areas
 Start with aspect relating to the structure or content of
a web page, in this the learner should master basic
skills on HTML (Hyper Text Mark up Language), the
latest version of HTML is HTML version 5. The
learner must get verse with using HTML tags (starts
and end tags) to create different HTML elements
such as html elements which the root element of
every HTML page

 Take at least basic courses relating to the styling of

web pages for good looks and feels hence in this
view the learner should work on CSS and some of its
framework, understanding the following;

- CSS (Cascading Style Sheet) properties (CSS

display, color, background, visibility, size, align,
background-image, attributes properties along side
CSS Web animations knowledge).
- The Learner should understand the inline CSS
Rules, internal CSS and CSS on an external style
sheet and their other of precedence.
- Understanding which CSS rule gets higher
precedence over the order.
- Additionally would be the use of flexible CSS
frameworks such as
 CSS GRIDS
 FLEXBOX
 SAS
- These frameworks make the usage of CSS styling
and positioning all that effective and furthermore
introduced the concept of SAS variable makes
could make the developer all that effective.
So far the use of CSS focuses just on the styling of
our web pages or web page.
 Behaviour of Elements on a webpage or Web
pages.
In this respect the developer takes a deeper look
into his or her web page or pages, in which the
elements defined by the HTML structure could
be seen as objects, hence have attributes and
methods. In addition there should be the
possibility of creating an entirely new HTML
element (similar to creating objects in normal
programming languages). These give the ability
of having a very dynamic client-site web page or
web pages.
 These points to the use of JavaScript which is a
very popular client-site programming language
that powers the web providing client-site
scripting codes to handle events such as mouse
and keyboard events.
NOTE JavaScript is different from Java
The ability to use HTML elements as a object
using JavaScript is possible through the
translation of each of the elements following the
DOM.
 The next interest of the developer should be on
the responsiveness of the web application or
website to various screen sizes such as desktop,
laptop, palmtop and mobile phones.
- The user start point is to set the view-port of
your web application pages to adapt to the
screen size

- Introduction of break points as the web page

shrink to smaller sizes ,these break point can be
handle with the use of CSS styling and CSS
frameworks (flexbox and css grid).

- Additionally a more powerful framework such

as bootstrap can make the entire process of
handling responsive designs all that simple and
fast.
 So far this focuses on client-site development.
Back-end Development
Back-end of any application is that part of an application
that interacts with the server through a specific URL
(uniform resource locator) and a given port on the server
which the application can be accessed. The server may
contain several applications that run on the server and
these different applications can be reached on a specific
server through its port number (port on which the
application is running)
Note:
 A specific server is reached out to via the IP
address of the server out there in the cloud.

 A specific application or service on the server

is reached at through a specified port on the
server on which the application or service is
running.
Through a specific port a given resource or code files
is located and this files usually have specific responses
which are programmed for unique request on specific
routes.
For our purpose of practice of the course we will be
making use of the WAMP server, such a server can be
access on the localhost of our personal computer.
Database Resource
Usually a very important part of the back–end is the
database which is usually in the case of a relational
database made up of tables which are related to one
another through keys attribute on the tables. These
database tables are access using a database query
language such as MySQL .Using SQL we can persist
CRUD on our database.
WAMP SERVER

What is WAMP?
WampServer is a Windows web development environment. It allows
you to create web applications with Apache2, PHP and a MySQL
database. Alongside, phpMyAdmin allows you to manage easily your
databases.
WAMP is an acronym for Windows Apache MySQL PHP. Apache,
MySQL and PHP are required to run a mysql/php based web application
(such as WordPress). By installing WAMP, your PC has the same
capabilities as the server from your hosting provider, and you can run
any php/mysql based application on your PC. Apache, the server
software will be installed, as well as the MySQL database server and
phpMyAdmin, a tool to manage databases, and the PHP programming
language. Note that you will only be able to host sites or run web
applications on your own PC. These sites or applications can not be
accessed online.
WAMP will run in Windows only. Alternatives are MAMP (for Mac) or
XAMPP (for Mac & Windows).

How To Download and Install WAMP

You can download WAMP via the WAMP site and select either the 32
or 64 bits version, depending on your PC’s processor. The current
version of WAMP (Wampserver 3.0.6 64-bit x64 or 32-bit x86)
contains:

 Apache 2.4.23
 PHP 5.6.25 and 7.0.10
 MySQL 5.7.14
  PhpMyAdmin 4.6.4
 Adminer 4.2.5
 PhpSysInfo 3.2.5

WAMP Prerequisites

WAMP was coded using C++ and therefore relies on the presence
of 2 Visual C++ runtime packages. So before installing WAMP you
are prompted to install these.

As the prompt is in French, here are the links to the 2 packages:

 Visual C++ Redistributable for Visual Studio 2012 Update 4

(choose x64 for 64-bit, and x86 for 32-bit)
 Visual C++ Redistributable for Visual Studio 2015 (choose x64 for
64-bit, and x86 for 32-bit)

With these installed, you can start the installation by running

the downloaded WAMP installer. The installer will take you
through a couple of prompts:
 Steps Involve in setting up a wamp server

 Download: Go to https://www.wampserver.com/en/ and

install the version that is matches with specification of your
system. After installation, run the installer
 On installing you will be required to chose your own
language

 Follow through with the license agreement, I accept the

agreement and press next.
There is a warning related to the C++ runtime packages that we’ve just
installed. packages that we’ve just installed. You can select where you
want WAMP installed. And the program group to create.
Once all the information is gathered,
 Choose the location where you want to install the program
or you can decide to go with the default installation
location
 Confirm your installation for the process to take effect
 When done, you can access your localhost server
environment. Take note of the default phpMyAdmin
username and password. As long as you run this instance of
WAMP on your own computer only, it is ok to keep the
defaults (username “root”, and no password).
To test if WAMP is installed propely, navigate to your
“server” at the address: http://localhost or the IP address
127.0.0.1. This will show the WAMP overview page, with
information on the server, and links to various tools.

If this page doesn’t show up properly, you need to make sure that the
WAMP server is started. When WAMP is up and running, you should
see a green icon in the Windows notification area.
2. Configuration: Now, we have to configure the WAMP contents
we installed. Once installed, you will mostly get a notification from the
firewall asking whether the newly installed software should get the
permission to use your network. Give it the permission and next find the
option in your hidden taskbar icons or in the windows start menu. The
color of the symbol corresponds to the status the server is in:

 Red- Can mean the WAMP server is temporarily deactivated or

there is some sort of hindrance that is not allowing it to work
 Orange- Can mean it is idle or, like red, there is something that
didn’t get installed properly.
 Green- The server is active and ready to use.
Go to your selected browser (the one you chose during the installation), and type http://localhost. If it
works, you have completed the installation correctly but if it doesn’t check the port could help.

If all goes well using localhost route gives the output as shown on the
picture below