Website Programming Arfi
Website Programming
Definition
Web programming is the process of creating an application or website that runs on the internet using a programming language. It involves writing code to organize the visual display (front-end), business logic (back-end), as well as the interaction between the user and the system as a whole. Web programming aims to create an interactive, dynamic, and functional experience for users. In other words, it is the art and science of combining technological elements to make a web application work well on various devices
Why Web Programming is important?
Imagine life without the internet. No Google to find information, no Instagram to share moments, or no Tokopedia for online shopping. All those things exist because there are people who program them. Web programming is the backbone of almost all digital services that we use everyday. It's not just about making good web pages, but also about ensuring that they work smoothly, quickly, and securely.
For example, when you order food online, there's a lot going on behind the scenes. On the front-end, you see pretty buttons and an easy-to-use menu. However, on the back-end side, there are systems working hard to process your order, calculate the total price, store payment data, and send the order details to the restaurant. All this happens in a matter of seconds, and that's the magic of web programming.
Key Components in Web Programming
- Front-End (User-Visible Part)
- The front-end is the face of a web application. It is the part that is directly seen and accessed by the user through the browser. For example, when you open a YouTube site, everything you see-such as videos, play buttons, comments, and navigation menus-is the work of the front-end.
- To build the front-end, developers usually use three main technologies:
- HTML (HyperText Markup Language): The basic language for structuring content. For example, HTML determines where text, images, or videos will be placed on a web page.
- CSS (Cascading Style Sheets): Used to design the appearance. CSS allows developers to add colors, fonts, layouts, and other visual effects to make web pages look attractive.
- JavaScript: Adds interactivity. JavaScript allows web pages to do things like animation, form validation, or even load new content without having to refresh the page.
- Back-End (the part that works behind the scenes)
- If the front-end is the face, then the back-end is the brain of a web application. The back-end is responsible for all the things that are not visible to the user, such as business logic, data processing, and communication with the database.
- A simple example: When you login to a social media account, it is the back-end that checks if your username and password are correct, and then grants access to your profile page. Technologies often used in the back-end include programming languages such as PHP, Python, Ruby, Java, or Node.js. There are also frameworks like Laravel (PHP), Django (Python), or Express.js (Node.js) that help speed up the development process.
- Database (Data Storage)
- A database is a repository of data used by a web application. For example, user data such as name, email, and password are stored in the database. Examples of popular databases include MySQL, PostgreSQL (for relational databases), and MongoDB (for non-relational databases).
- Think of a database as a large closet where you store important items. Whenever you need something, the back-end will “open this closet”, retrieve the necessary data, and send it to the front-end for display to the user.
How do all these components work together?
- Front-End: Your browser displays the main page of the store with a list of available products. All of this is built using HTML, CSS, and JavaScript.
- Back-End: When you add a product to the shopping cart, the back-end processes the request. For example, the back-end will check the product stock in the database and ensure that the product is still available.
- Database: Information about the products you add to the cart is stored in the database. So are data such as the shipping address and payment method you entered during checkout.
- Once all the data is processed, the back-end sends the order confirmation back to the front-end, and you see a “Thank you for shopping!” page on your screen.
