CREATING WEB APPLICATION
A complete application consists of two parts:
- the frontend, which includes all the visual elements that users interact with in their browsers, e.g. text, colors, menus, buttons, shapes, interaction with the user. HTML, javascript, CSS languages are used for frontend programming, it can be added with libraries such as jquery and with the appropriate framework such as. Bootstrap, Angular, React. The simplest websites can only be done with the first 3 mentions.
- The backend is the part of the application that users do not see; it manages the data, including the database.This section is responsible for storing, organizing and storing data. The backend communicates with the frontend, receiving information and storing it. On request to download data from the database and send them to the frontend part of the application. On static sites, where the content of the page does not change, there does not have to be a background, while on dynamic sites it is mandatory.
CMS(Control Management System)
Websites can be created using HTML, CSS, and JavaScript for each page, and can also utilize a content management system (CMS) for easier creation and management. The web platform is otherwise called CMS (Control Management System) and the most famous are: Wordpress, Joomla and Drupal.
CMS significantly speeds up the development of a website and makes it easier to maintain, but on the other hand there are limitations in creating your own code. CMSs themselves differ in this regard. While WordPress is the most popular and suitable for sites with a smaller number of pages, for sites that heve been created as blog sites. There are a large number of additions, ie. an extension that can be installed and increase the functionality of the website. Some are free, but there are also a large number of commercials. WordPress is good for users who don't know and don't want to write much of their own code and is easy to use.
Joomla, on the other hand, is suitable for creating larger sites and more than WordPress is suitable to write your own website editing code. Creating a website for school or college is a good example where joomla is a good choice for CMS.
Drupal is the most difficult to use, has the greatest support for writing your own code when creating a website and it is the most popular for large websites, as the base site, of some large corporations..
The greatest freedom in writing code, but also the most required time, is to create a site without a CMS, but with the use of appropriate frameworks to support the creation and maintenance of the website.
CMS significantly speeds up the development of a website and makes it easier to maintain, but on the other hand there are limitations in creating your own code. CMSs themselves differ in this regard. While WordPress is the most popular and suitable for sites with a smaller number of pages, for sites that heve been created as blog sites. There are a large number of additions, ie. an extension that can be installed and increase the functionality of the website. Some are free, but there are also a large number of commercials. WordPress is good for users who don't know and don't want to write much of their own code and is easy to use.
Joomla, on the other hand, is suitable for creating larger sites and more than WordPress is suitable to write your own website editing code. Creating a website for school or college is a good example where joomla is a good choice for CMS.
Drupal is the most difficult to use, has the greatest support for writing your own code when creating a website and it is the most popular for large websites, as the base site, of some large corporations..
The greatest freedom in writing code, but also the most required time, is to create a site without a CMS, but with the use of appropriate frameworks to support the creation and maintenance of the website.
Framework
Web framework or software framework is support for web application development and consists of APIs (classes that can be used for code development), web services and web resources. They facilitate application creation and standardization of application writing in MVC (Model View Controller) architecture. So, separating the model, the visual part and the part in charge of management within one application. They automate the writing of certain standard pieces of code, for example, they provide libraries for working with a database, managing sessions, a part for creating a Template.
There is one or more frameworks for each technology, e.g. Express for Node.js, ie the frame for the server part of the application written in javascript, for PHP the famous Laravel, Symphonies, etc., in Python is Django, Spring for writing code in Java, Angular as a frame for the client side of the web application, Ruby on Rails etc.
Since there are back-end and front-end parts of the application, there is both a back-end framework as support for creating server pages and a front-end framework for creating the client part of the application.
There is one or more frameworks for each technology, e.g. Express for Node.js, ie the frame for the server part of the application written in javascript, for PHP the famous Laravel, Symphonies, etc., in Python is Django, Spring for writing code in Java, Angular as a frame for the client side of the web application, Ruby on Rails etc.
Since there are back-end and front-end parts of the application, there is both a back-end framework as support for creating server pages and a front-end framework for creating the client part of the application.
Hosting website
In order for a website to be accessible to everyone over the Internet, it must be hosted by some host provider. After creating the files that make up a website, they need to be upload on some web platform that has support for the language in which the application is written. It is also necessary to create a website that has a domain, ie address and site name. In the background of addresses and names, the IP address is determined, through which computers communicate with each other on the Internet.
Depending on the technologies used for developing the website, it is important to choose the appropriate hosting providers.
Depending on the technologies used for developing the website, it is important to choose the appropriate hosting providers.
Difference between Static and Dynamic Websites:
- Static websites are sites whose content remains constant and does not change without programmer intervention. They typically consist of HTML pages that load directly from the server. Static sites are faster to load and easier to create but are not adaptable to user needs or changes in content.
- Dynamic websites, on the other hand, generate content in real-time based on user interactions or data from a database. These sites use server-side scripts (such as PHP or Node.js) and databases (like MySQL or MongoDB) to create customizable pages that change depending on user requests or inputs.
Terminology:
- MVC (Model-View-Controller): This is an architectural pattern that separates an application into three main components:
- Model represents the data and logic of the application.
- View is responsible for the user interface display.
- Controller acts as an intermediary between the model and the view, handling user inputs and updating the model.
- API (Application Programming Interface): An API is a set of rules and protocols that allows different software applications to communicate with each other. Through an API, one application can use the functionalities or data of another application, facilitating integration and data exchange between systems.
Examples
Frontend Technologies
- HTML: Create a simple webpage structure with headings, paragraphs, and images. For example:
html
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph describing my website.</p>
<img src="image.jpg" alt="A beautiful scenery">
</body>
</html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph describing my website.</p>
<img src="image.jpg" alt="A beautiful scenery">
</body>
</html>
CSS: Style the webpage to improve its appearance:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007BFF;
}
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007BFF;
}
JavaScript: Add interactivity, such as a button that alerts a message when clicked:
function showAlert() {
alert("Hello! Welcome to my website!");
}
alert("Hello! Welcome to my website!");
}
Backend Technologies
- Node.js: Create a simple server that responds to requests:
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World!\n');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World!\n');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
PHP: A basic script to display data from a database:
<?php
$conn = new mysqli('localhost', 'username', 'password', 'database');
$result = $conn->query("SELECT * FROM users");
while ($row = $result->fetch_assoc()) {
echo $row['name'] . "<br>";
}
?>
$conn = new mysqli('localhost', 'username', 'password', 'database');
$result = $conn->query("SELECT * FROM users");
while ($row = $result->fetch_assoc()) {
echo $row['name'] . "<br>";
}
?>
Using a CMS
- WordPress: Setting up a blog can be done in a few steps:
- Choose a domain name and hosting provider.
- Install WordPress through the hosting dashboard.
- Select a theme and customize it using the WordPress editor.
- Add posts and pages using the user-friendly interface.
- React: Create a simple component that displays a greeting
import React from 'react';
function Greeting() {
return <h1>Hello, World!</h1>;
}
export default Greeting;
function Greeting() {
return <h1>Hello, World!</h1>;
}
export default Greeting;
|
Next
Creating web site simple >| |