What are different stages in website development regarding programming/markup languages(step by step and in detail, if possibl)?

Question

For example, HTML and CSS for webpage creation, PHP for backend (I don't know which part of the backend),....

Answer 1

I could've given you more details but there isn't much space available, so I'll post it in two parts 😊

[ STAGE 1 ] ~ Plan the idea.
Looks and functionality (User Interface), amount of "screens" or pages (home, login, products, etc)

[ STAGE 2 ] ~ Workflow Map and Design.
If you'll have users, determine "States": logged in and logged out. Map out the workflow, what pages will the user see on each state.

[ STAGE 3 ] ~ Database Architecture.
For features such as: create an account, sign-in, verify email, etc. you will need to create a database to store all the information. To access this database you'll need a server-side scripting language. For example: PHP paired with MySQL, for data handling and storage.
- MySQL: Create database and tables.
- PHP: Back-end. Create the Classes that will handle all the interactions with the database and all other user interactions. Work "modularity": create multiple php files, each of the major views should have their own PHP file, this will help you avoid repeating common code, for example: "signup.php" for the sign up page. And for PHP common code include common files, for example: "header.php" and "close.php" in all the pages.

Answer 2

[ STAGE 4 ] ~ HTML and CSS.
HTML gives structure and organizes the content on your website. CSS styles html elements, creates animations, etc.

[ STAGE 5 ] ~ JavaScript/JQuery/AJAX.
JavaScript and JQuery will make the interface interactive. If you want something to happen when the user clicks something or even animations, JS and JQuery will make it happen. They can also dinamically add or remove HTML or CSS code.
In your "index.php" file write all the HTML and have it call all your script files with script tags (custom javascript, jquery libraries, plugins, etc), basically, PHP will be spitting out all your HTML code.
In case you want an "auto save" feature, for example after user actions, then use AJAX, it will allow you to send requests and get responses from the server without a page refresh.

[ STAGE 6 ] ~ Security.
Attacks on the server side involve database attacks (called SQL injection, where a database can be read, manipulated, or deleted entirely) and/or dangerous data submitted. You can avoid these risks with PHP methods: PDO (eliminates SQL injection using prepared statements), Data Escaping (sanitizes user input to make sure no <script> tags make it into the database)
Other good things to do:
- "Pack" the JavaScript so it isn't so easily readable.
- Client-Side sanitization (say your website offers a feature where the user inputs something that is immediately displayed on screen, then make sure it doesn't include executable JavaScript)
- Use the POST method over the GET method, especially for your AJAX calls.

Hope this helps 😊

Answer 3

Paola, thanks for answer! I'd like it.