CS 283
Web Programming
Fall 2022/2023
Dr. Nehal M. Ali
CS283 1
Welcome to CS 283/383
Instructor: Dr. Nehal M. Ali
Office: Building H, Room 414
Office Hours: Monday 2:00 – 3:30
Tuesday 9:30 – 11:00
Email: [email protected]
CS283 2
Course Objectives
• By the end of this course, you will be able to:
• Design and implement a professional website
• Develop web pages using HTML
• Make stylistic decisions with CSS
• Create interactive websites with JavaScript
• Enhance interactive websites with AJAX and XML
• Create dynamic web pages with PHP.
• understand and implement the handling of a backend DB.
CS283 3
Course Objectives (cont.)
• By the end of this course, you will be able to:
• Create your own web programming portfolio
• Speak the web programming lingo
• Have fun with web programming!
CS283 4
Why do you need CS 283?
• Web Development is extremely important for your career development.
• Scripting languages is a core in many integration platforms.
• Move to Mobile Development.
CS283 5
Quick Poll ! ☺
Please login to https://nearpod.com/
Use the code given by your instructor
Lectures
• Lectures will be interactive. This means:
• You will need to study the new material before every lecture (slides, book, and online
material)
• We will have a lab on every week, so you will need to code in almost every lecture
• You will post your questions on the discussion board before each lecture. If you do
not post any questions, I assume you have understood everything. Therefore…
• You may be called in class to explain the material to your classmates
CS283 7
Course Plan
Week# Topic Quiz? Formative Assessment (Tests the in-lecture
understanding)
Week 1 introduction to Web YES (introduction to Web Development)
Development
Week 2 HTML Basics
Week 3 Cascading Style Sheets CSS YES (HTML QUIZ)
Week 4 JavaScript
Week 5 JavaScript
Week 6 Jquery YES (Java Script)
Week 7 Midterm Exam
Week 8 Midterm Exam
Week 9 Document Object Model YES
Week 10 PHP I YES
Week 11 PHP II
Week 12 PHP and MYSQL
How to get help
• Join my office hours
• Or set an appointment with me
via e-mail
• Use the textbook:
“Internet & World Wide Web
HOW TO PROGRAM”
CS283
by MP. J. Deitel and H. M. Deitel 9
Grading
Lecture Work 20%
Lab Work 15%
Project 25%
Final exam 40%
Total 100%
Homework and Programming projects will be posted
online on the Moodle
CS283 10
Your Project Development
• You can start working on this from the first week of the class
• Design and implementation of a professional website:
• Professional Style
• Interactive
• You can complete the project in teams of two/three
CS283 11
Project Specifications
• Your project should the following features:
0. . Design & Evaluate - think carefully about how users will use your
site, design a great interface, and evaluate it with real people.
1. HTML/CSS- Enhanced and standardized look and feel.
2. JavaScript- use to provide validation and verification to the web
content.
3. JQUERY – for elements animation
4- Make sure to Implement the DOM Concept
5. PHP – Server-side logic.
6. Connect to a DB. – MYSQL and PHP
7. Have a proper documentation.
CS283 12
Homework and Labs
• It will involve:
• Applying what we learned in class
• Clean design and coding
• Clear documentation
• Homework will be completed individually
CS283 13
Policies
• Cheating means “submitting, without proper attribution, any computer code that is
directly traceable to the computer code written by another person.”
• Or even better:
• “Any form of cheating, including concealed notes during exams, copying or allowing
others to copy from an exam, students substituting for one another in exams,
submission of another person’s work for evaluation, preparing work for another
person’s submission, unauthorized collaboration on an assignment, submission of the
same or substantially similar work for two courses without the permission of the
professors. Plagiarism is a form of Academic Misconduct that involves taking either
direct quotes or slightly altered, paraphrased material from a source without proper
citations and thereby failing to credit the original author. Cutting and pasting from any
source including the Internet, as well as purchasing papers, are forms of plagiarism.”
• I give students a failing homework grade for any cheating.
• A second cheating attempt will be escalated higher level of punishment.
CS283 14
Policies
• You may discuss homework problems with classmates, after you have made
a serious effort in trying the homework on your own.
• You can use ideas from the literature (with proper citation).
• You can use anything from the textbooks/notes.
• The code you submit must be written completely by yourself.
• Your activities in lab will be considered for the coursework evaluation.
CS283 15
Policies
• Read the collaboration policy carefully.
• Late policy:
• Late assignments will be accepted (up to 48 hours) but you will be penalized 10% per
each late day.
CS283 16
Tools and Editors
• Editors
• Textpad
• Notepad ++
• Visual Studio Code
• Web Server
• XAMP
CS283 17
Course Introduction
CS283 18
What is the internet?
• A collection of computer networks that use a protocol to exchange data
• Is the World Wide Web (WWW) and the internet the same?
CS283 19
Brief history
• Began as a US Department of Defense
network called ARPANET (1960s-70s)
• Packet switching (in the 60s)
• E-mail is born on 1971
• TCP/IP beginning on 1974 (Vinton Cerf)
• USENET (1979)
• By 1987: Internet includes
nearly 30,000 hosts
CS283 20
Brief history (cont.)
• WWW created in 1989-91 by Tim Berners-Lee
• Popular web browsers released:
• Netscape 1994
• IE 1995
• Amazon.com opens in 1995
• Google January 1996
• Wikipedia launched in 2001
• MySpace opens in 2003
• Facebook February 2004
CS283 21
The future of the internet?
What will the internet look like in 2040?
http://www.bbc.com/future/story/20141015-will-we-
fear-tomorrows-internet
15 predictions for the future of the Internet
http://www.pbs.org/newshour/rundown/15-
predictions-future-internet/
CS283 22
Key aspects of the internet
• Sub-networks are independent
• Computers can dynamically join and leave the network
• Built on open standards
• Lack of centralized control (mostly)
• Everyone can use it with simple, commonly available software
CS283 23
People and organizations
• Internet Engineering Task Force (IETF): internet protocol standards
• Internet Corporation for Assigned Names and Numbers (ICANN): decides
top-level domain names
• World Wide Web Consortium (W3C): web standards
CS283 24
Internet Protocol (IP)
• Simple protocol for data exchange between computers
• IP Addresses:
• 32-bit for IPv5
• 128-bit for IPv6
CS283 25
Web Applications
• All type of applications that has some parts hosted within a web
browser.
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview/basic_static_app_server.png
Client / Server structure
https://www.seguetech.com/client-server-side-code/#:~:text=The%20%E2%80%9Cclient%E2%80%9D%20is%20a%20web,or%20on%20the%20web%20server.
The common gateway interface (CGI)
• A standard way for a Web server to pass a Web user's request to
an application program and to receive data back to forward to
the user.
• Can be written in any programming language
Client – Server communication
Client – Server communication
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview/basic_static_app_server.png
Web Terminologies
What is an IP Address
• A unique identifier assigned to each and every device over the
internet.
• Primarily used to identify and track devices accross the network.
Public IP Private IP
identifies you to the wider internet
so that all the information you're used within a private network to
searching for can find you connect securely to other devices
within that same network
What is cybersecurity?
What is Cyber security?
• It is the procedures of protecting a computer and data from
unauthorized access, use, or disclosure.
• Cyber security includes:
• antivirus software,
• Updating the operating system and applications regurarely
• Installing firewalls and password managers
• Data encryption.
Uniform Resource Locator (URL)
• Identifier for the location of a document on a web site
• Example: http://dept.ju.edu/cs/index.html
• Upon entering this URL into the browser, it would:
• ask the DNS server for the IP address of dept.ju.edu
• connect to that IP address at port 80
• ask the server to GET /cs/index.html
• display the resulting page on the screen
CS283 35
Hypertext Transport Protocol (HTTP)
• Set of commands understood by a web server and sent from a browser
• Some HTTP commands (your browser sends these internally):
• GET filename : download
• POST filename : send a web form response
• PUT filename : upload
• Exercise: simulate a browser with a terminal window
CS283 36
HTTP Error Codes
• When something goes wrong, the web server returns a special "error code"
number
• Common error codes:
Number Meaning
200 OK
page has moved (permanently or
301-303
temporarily)
403 you are forbidden to access this page
404 page not found
CS283 37
500 internal server error
Internet Media (“MIME”) types
MIME (Multipurpose Internet Mail
file extension
Extensions) type
text/html .html
text/plain .txt
image/gif .gif
image/jpeg .jpg
video/quicktime .mov
application/octet-stream .exe
CS283 38
Test your
Knowledge
Please login to https://nearpod.com/
Use the code given by your instructor
Introduction
to website
Development
website development
• Website development is the process of designing, building, and
maintaining a website.
• Websites are necessary for all sizes of businesses to connect with
customers.
Web Development Basics
➢HTML
➢CSS
➢Web Server
HTML
• HTML is the basic block of all
websites.
• a markup language to style the
website's content and
structure.
• To create pages with text,
photos, videos, and embedded
objects.
Cascading Style Sheets (CSS)
• A great tool for styling a website's images , videos and
text .
• Can be used to change the color, size, and layout of the
website's elements.
• JavaScript is a programming language that can be used
to create an interactive website.
web servers
• A web server is the computer system where the website is located.
• Web servers avails the required hardware (e.g. Internet
connection) and software (e.g. HTML5) to build and access a
website.
• Examples for Webservers:
• Microsoft's Web Server, IIS
• Apache Web Server
• Tomcat web server
Types of Web Development
• Front-end development
• Back-end development
• Full stack development.
Front-End Development
• 1. Developing and Designing the graphical user interfaces (GUIs).
• 2.Developing and testing web pages using HTML, CSS, and
JavaScript.
• 3. Building custom animations and for websites and web
applications.
• 4. Applying tests to assess the efficiency and reliability of a website
or application's user interface.
Back-End Development
• A vital component of web application.
• Responsible for ensuring that the system is meeting all the requirements
and is working as expected.
• Responsible for ensuring that all required data is accessible by the system’s
users and that it is securely stored.
• Requires high programming skills and sufficient knowledge of web
technologies such as PHP, Java script, HTML, and CSS.
Full-stack development
• The entire process of developing a web application from start to
finish.
• This process includes the design, development, testing and
deployment of all the necessary components.
The Website Development Process
