Web Programming Fundamentals PDF

# WEB PROGRAMMING FUNDAMENTALS ## Introduction to Web Programming - The Web has been playing a very crucial role in communication and delivery of information. - In this field, there have been various applications of Web starting from Web 0.0 till Web5.0. - Web 2.0, where blogs, wikis, social netwo...

# WEB PROGRAMMING FUNDAMENTALS ## Introduction to Web Programming - The Web has been playing a very crucial role in communication and delivery of information. - In this field, there have been various applications of Web starting from Web 0.0 till Web5.0. - Web 2.0, where blogs, wikis, social networks, multimedia applications, dynamic programming scripts are being used for collection, contribution and collaboration on the Web. - While Web3.0 focused on the semantic meaning of the web' data. - Considering the vast range of entities involved, Web sites can be generally categorized as: - Personal Web sites - Commercial Web sites - Organizational including government and non-profit organization Web sites - Entertainment Web sites ## What is a Website? - A collection of related Web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL), often consisting of only the domain name. - A Web site is hosted on at least one Web server, accessible via a network such as the Internet or a private local area network. - Also, it is considered as a set of files stored on the World Wide Web. It is viewed with a browser like Microsoft Edge, Firefox, Safari or Chrome. - Each Web site contains a home page (the main page which users see when they enter the site) and additional documents and files. - The sites are owned and managed by individuals or organizations or companies to promote their interests. - The pages of a Web site can usually be accessed from the homepage or otherwise their specified URLs. ## What is Web Development? The image depicts a diagram of a website. - The top section represents the **frontend** of a website: - It is where the user interacts with the website. - This section of the website is built with HTML, CSS and Javascript. - The user interacts with the website through a computer, which represents the user. - In the middle section, you have the **web server**. - It is where the website is hosted. - The web server handles the communication between the user and the database. - It receives HTTP requests from the user's computer and sends HTTP responses back. - The web server receives a query from the user, then queries the database and retrieves relevant information, which is processed by the web server and sent back to the user. - The bottom section depicts the **backend** of a website: - The backend of a website includes the **database** and the **web server**. - The database stores all of the data for the website. - It is constructed by programming languages such as Python, Django and SQL. ## Types of Developers There are 3 types of developers: | Developer Type | Learns | Does | Character | |---|---|---|---| | Frontend Developer | HTML, CSS, Javascript, Bootstrap, Foundation, Backbone frameworks | Creates user-friendly webpages with good screen visuals and functionality. Solves user-centered issues. | Creative, imaginative, innovative and empathetic | | Backend Developer | PHP, Python, Ruby, Server programme SQL/Oracle | Builds and maintains web servers, applications and databases. Ensures frontend operations are smooth. | Analytical, fast, composed, logical, detail oriented | | Full-stack Developer | All of the languages for both frontend and backend | Mostly backend work, but they are also adept at frontend languages. Manipulates how the website looks on the user's end. | Innovative, disciplined, multi-taskers | 1. A **front-end developer** takes care of layout, design and interactivity using HTML, CSS and JavaScript. They take an idea from the drawing board and turn it into reality. 2. The **backend developer** engineers what is going on behind the scenes. This is where the data is stored, and without this data, there would be no frontend. The backend of the web consists of the server that hosts the website, an application for running it and a database to contain the data. 3. **Full-stackers** take care of both the front-end and the back-end, and need to know how the web works on all levels, in order to determine how the client- and server-sides will relate. Naturally working up to this level of expertise will take longer, as there is more to learn. <br> ## Frontend and Backend Languages The image depicts a diagram of frontend and backend languages. - On the left hand side of the image, frontend languages are displayed: - HTML - CSS - JavaScript - jQuery - AngularJS - On the right hand side of the image, backend languages are displayed: - php - JAVA - python - SQL ## Fundamentals of Web - The fundamentals of working of a Web are knowledge of HTML, role of server and importance of the browser. - HTML (Hypertext Markup Language) is a computer language that describes how a page/text should be formatted/presented in the Web site. - It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. - The Web Server is a computer that holds and serves a Web site. The Web server includes the hardware, operating system, Web server software, TCP/IP protocols and site content (Web pages, images and other files). Using the HTTP protocol, the Web server delivers Web pages to browsers. <br> The image depicts a diagram that shows the relationship between HTML, CSS and Javascript and its relationship to a website. - **HTML**: defines the content of the webpage. - **CSS**: specifies the layout of the webpage. - **Javascript**: is used to program the behavior of the webpage. <br> - Websites need web developers and web designers to be specialized in either the frontend or backend of website creation. - **Frontend design**: “Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. - Graphic design and image production - Interface design - Information design as it pertains to the user's experience of the site - HTML document, style sheet development and JavaScript - **Backend development**: “Backend” refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. - How the information is organized on the server - Forms processing - Database programming - Content management systems - Other server-side web applications ## Types of Websites There are two major types of websites: - **Static website:** - The information is displayed in the same format as they are stored in the server. - Such information is primarily coded in HTML. - Most of the Web sites are static as they present pre-defined, static information, in the sense the pages retrieved by different users at different times remain the same. - To make a change to the content, the files need to be manually opened, data changed and the new version should be uploading to the Web. - **Dynamic Website:** - Pages are ones that retrieves fresh information each time you view. - How one retrieves examination at University website may cited as an example. - The "Examination Results" button at www.University.com/ can be described as dynamically built because it supplies different information (marks) to different students when the candidates search by entering their enroll numbers. - The information, in fact, doesn't come from html pages but from databases which may be updated minute by minute, day or week. <br> The image depicts a diagram that shows the difference between a static website and a dynamic website. - **Static websites** are built on the client-side. - They utilize HTML, CSS, Javascript, jQuery, React and AngularJS. - **Dynamic websites** are built on the server-side. - They utilize HTML, CSS, Javascript, jQuery, React, AngularJS, PHP, MySQl, ASP.NET, and ORACLE MS SQL SERVER. <br> ### Major advantages of static websites: 1. Static websites use Client-side scripts so page renders occurs in client side and user's browser (render engine) and there is no process is server-side. 2. Speed: static-pages load fast. 3. SEO: Search engines like fast web pages and index fast pages higher. 4. Lower cost 5. Security: there is no file upload, no database, no processing of server-side scripts; so security is needed only on web server and not in static web-pages. 6. Static website needs a small amount of server resources. ### Major disadvantages of static websites: 1. No admin UI (User Interface) so there's no where to login to admin panel. 2. Can't have new posts and When new content and upgrade needed, developer should update scripts. 3. No user input, for example we cant's have standalone: comments, shopping card, file upload. ## Patterns of Web 1. **Blog (Web Log)**: site generally used to post online diaries which may include discussion forums. 2. **Forum**: a site where people discuss various topics. 3. **Social Networking Site**: where users could communicate with one another and share media, such as pictures, videos, music, blogs, etc. with other users. These may include games and Web applications. 4. **Wiki Site**: which users collaboratively edit (such as Wikipedia and Wikihow). 5. **Web Portal**: that provides a starting point or a gateway to other resources on the Internet or an intranet. 6. **Search Engine Site**: a site that provides general information and is intended as a gateway or lookup for other sites like Google, Yahoo, Bing search engines. 7. **School Site**: where teachers, students, or administrators can post information about current events at or involving their school. 8. **Community Site**: a site where persons with similar interests communicate with each other, usually by chat or message boards, such as Facebook. <br> ## Website Hosting - **Web Hosting**: Free and Fee-based Web hosting can be free or paid. - There are many agencies (Internet Service Providers) that provide you with free hosting facility. - The drawbacks of free hosting are that the traffic/visibility of the site could be poor as the natural search engines won't place/rank you well. Besides, the ISPs tend to place advertisements on your Web site to cover their expenses which may not be to your liking. - Another alternative is to host the Web site on your own server. Organizations that have steady IT set-up resort to this.