Lesson 1

Programmers and developers write the applications that produce interactivity on a Web site.
If you are creating or managing a Web site, you need to be familiar with the development tools that create such Web-based applications. After completing this module, you will be able to:

1. Describe how programming languages are used
2. Explain the purpose of client-side scripts and applets
3. Describe the characteristics of cookies
4. Explain how cookies are created
5. Explain the functionality provided by server-side scripts
6. Define dynamic Web page technologies
7. Describe architectural considerations of developing Web sites and applications
8. Describe how Web sites and applications should be tested

Programming languages play a pivotal role in developing interactive and functional websites. Here's how they are typically used in web development:

1. Frontend Development (Client-Side)
   • HTML (HyperText Markup Language):
     • Purpose: Not strictly a programming language but a markup language, HTML structures the content of web pages. It defines elements like headings, paragraphs, images, links, etc.
     • Usage: HTML forms the skeleton of a website, providing the basic layout and content.
   • CSS (Cascading Style Sheets):
     • Purpose: Like HTML, CSS isn't a programming language but is crucial for styling. It controls the look and feel of HTML elements.
     • Usage: CSS is used to style HTML elements, ensuring the site is visually appealing, responsive, and accessible. It manages layout, colors, fonts, and animations.
   • JavaScript:
     • Purpose: A full-fledged programming language for client-side scripting. JavaScript adds interactivity to webpages.
     • Usage:
       • Manipulating DOM: JavaScript can dynamically change the content, style, and behavior of HTML elements after the page has loaded.
       • Event Handling: Respond to user interactions like clicks, form submissions, or mouse movements.
       • Asynchronous Operations: With AJAX (Asynchronous JavaScript and XML), JavaScript can fetch data from servers without reloading the page, enhancing user experience with features like live updates or infinite scrolling.
2. Backend Development (Server-Side)
   • Languages like Python, Ruby, PHP, Java, Node.js (JavaScript), etc.:
     • Purpose: These languages handle server-side logic, database interactions, user authentication, session management, and more.
     • Usage:
       • Data Processing: They process data submitted from forms, handle database queries, and perform calculations or logic that should not be done on the client side for security or performance reasons.
       • API Development: Creating RESTful or GraphQL APIs to serve data to the frontend or other services.
       • Server Management: Handling HTTP requests, routing, and session management.
3. Database Interaction
   • SQL (Structured Query Language):
     • Purpose: Used specifically for managing and manipulating relational databases.
     • Usage: SQL queries are embedded in backend scripts to Retrieve, Insert, Update, or Delete data in databases like MySQL, PostgreSQL, etc.
4. Frameworks and Libraries
   • Frontend:
     • Libraries like jQuery for simplifying JavaScript tasks, or frameworks like React, Angular, or Vue.js for building single-page applications (SPAs) with complex state management.
   • Backend:
     • Frameworks like Django (Python), Ruby on Rails (Ruby), Express.js (Node.js), or Laravel (PHP) provide structures and tools to speed up development, enforce best practices, and handle common tasks like routing or database ORM (Object-Relational Mapping).
5. Full-Stack Development
   • Developers often use a combination of these languages and frameworks to create both frontend and backend of an application:
     • MERN (MongoDB, Express.js, React, Node.js), MEAN, or LAMP (Linux, Apache, MySQL, PHP) stacks are examples where developers work across the full spectrum of web development.

Practical Application:

• Integration: Programming languages work together. For instance, a user might fill out a form (HTML), which looks good due to CSS. JavaScript would handle form validation on the client-side, then send the data to a server where a backend language processes it, interacts with a database, and perhaps returns some JSON data back to the client, which JavaScript then uses to update the page without a refresh.
• Continuous Development: These languages allow for the continuous evolution of a website, enabling developers to add new features, fix bugs, enhance performance, and adapt to new web standards or user needs.

Understanding these uses helps in managing or creating websites that are not just static content but dynamic, interactive platforms that serve user needs efficiently and securely.

As applications on the Web become larger and larger, how can web developers manage the complexity?
In many ways, we need to turn to some of the same good practices used in other types of software development. Generally speaking, these practices are not yet pervasive in web development. That is, in software development primarily using HTML, CSS, JavaScript, and various server-side scripting languages (we will use PHP for the server-side scripting in this module and will migrate to node in the future, but the same principles apply to many other languages). Furthermore, the uniqueness of these technologies poses a challenge for developers trying to apply good practices in a cohesive way. One of the themes that you will see repeated in this module is the importance of extending modular development practices to web development. This module presents concrete, practical techniques to achieve modularity in large web applications. In the process, we will explore many of the finer aspects of HTML, CSS, JavaScript, and PHP and Node. You may find that most of the techniques are relatively simple to apply, and none rely on the use of specific frameworks. That said, it is important to realize that they do not preclude you from using various frameworks, either; to the contrary, these techniques create a better landscape in which to use many frameworks. As a case in point, we will look at several examples that utilize the jQuery JavaScript library. In the next lesson, you will learn how programming languages are used to develop applications for Web sites.