Forem: abdessamad idboussadel

Setting Up an Apache Server with PHP and SSH on Linux

abdessamad idboussadel — Sun, 09 Feb 2025 22:49:13 +0000

On my journey of learning the basics of Linux and server management essential skills that every developer should have, even front-end ones.I’ve taken notes that might help others as well. In this blog, I’ll be sharing my insights on setting up an Apache server with PHP on Linux. If you find this helpful, let me know—I have plenty more to share! 😊

Let's begin by running the following command to install the necessary packages:
Run the following command to install the necessary packages:

sudo apt update && sudo apt upgrade -y
sudo apt install apache2 mysql-server php libapache2-mod-php php-mysql -y

1. Why `php-mysql` and not just `mysql`?

php-mysql is a PHP extension that allows PHP to communicate with MySQL databases.
Without php-mysql, PHP scripts won't be able to interact with MySQL.

2. What is `libapache2-mod-php`?

libapache2-mod-php is an Apache module that enables PHP processing within the Apache web server.
It ensures that Apache can handle .php files and execute PHP scripts.

then run the following commands:

sudo systemctl start apache2
sudo systemctl enable apache2

sudo systemctl start mysql
sudo systemctl enable mysql

`sudo systemctl start apache2`

Starts the Apache service immediately.
However, it will not start automatically on reboot.

`sudo systemctl enable apache2`

Enables the Apache service to start automatically at boot.

Configure the MySQL Database

Run the MySQL security script to secure your database:

sudo mysql_secure_installation

Set a root password
Remove anonymous users
Disallow remote root login
Remove test databases
Reload privilege tables

Then, log in to MySQL and create a database:

sudo mysql -u root -p

Inside MySQL:

CREATE DATABASE mydatabase;
CREATE USER 'abdessamad'@'%' IDENTIFIED BY '123456789';

# Creates a new MySQL user myuser with the password mypassword.
# The @'%' part allows the user to connect from any host (% is a wildcard representing any IP address).
GRANT ALL PRIVILEGES ON mydatabase.* TO 'abdessamad'@'%';

# Refreshes the MySQL server's internal cache of user privileges. This is necessary after creating users or changing privileges to apply the changes.
FLUSH PRIVILEGES;
EXIT;

Configure Apache to Serve Your PHP Site

Move your PHP files to the web root directory:

sudo rm -rf /var/www/html/*
sudo nano /var/www/html/index.php

Add this test PHP code:

<?php
echo "its finaly working ..."
?>

Save and exit.

Set proper permissions:

# Change ownership of all files and directories in /var/www/html recursively
# The user and group ownership is set to 'www-data' which is the default user/group for web servers (Nginx/Apache)
sudo chown -R www-data:www-data /var/www/html

# - Owner (www-data) has read, write, and execute permissions (7)
# - Group (www-data) and Others have read and execute permissions, but no write permissions
sudo chmod -R 755 /var/www/html

Restart Apache:

sudo systemctl restart apache2

it should be working on the localhost now :

6. Configure Apache for Network Access

Edit the default Apache config:

sudo nano /etc/apache2/sites-available/000-default.conf

Find DocumentRoot /var/www/html and add:

<VirtualHost *:80>
    DocumentRoot /var/www/html
    <Directory /var/www/html>
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Save and exit.

Allow traffic through the firewall:

sudo ufw allow 80/tcp
sudo ufw allow 3306/tcp
sudo ufw reload

Enable mod_rewrite:

sudo a2enmod rewrite
sudo systemctl restart apache2

now check your server ip using :

ip a

now you can access it outside the vm and access on the network :

If it’s not working, or if you want to access the server from outside the local machine on the network, try using a bridged network instead of NAT in VMware or VirtualBox. This will allow you to use a local IP address (e.g., 192.x.x.x) instead of a private IP.

if your apache server and mysql will be on separate servers then you need to :

Allow Remote MySQL Access

Edit the MySQL config file:

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

Find bind-address = 127.0.0.1 and change it to:

bind-address = 0.0.0.0

Save and exit (CTRL + X, then Y, then ENTER).Now any one can access your db remotely.

Restart MySQL:

sudo systemctl restart mysql

Now lets test it with dynamic php page :

sudo mysql -u root -p

CREATE DATABASE mydatabase;
USE mydatabase;

CREATE TABLE books (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
author VARCHAR(255) NOT NULL,
genre VARCHAR(100),
published_date DATE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

<?php
$servername = "localhost";
$username = "myuser";
$password = "mypassword";
$dbname = "mydatabase";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'];
    $author = $_POST['author'];
    $genre = $_POST['genre'];
    $published_date = $_POST['published_date'];

    $sql = "INSERT INTO books (title, author, genre, published_date) 
            VALUES ('$title', '$author', '$genre', '$published_date')";

    if ($conn->query($sql) === TRUE) {
        echo "New book added successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

// Fetching all books
$sql = "SELECT id, title, author, genre, published_date FROM books";
$result = $conn->query($sql);

$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a New Book</title>
</head>
<body>
    <h1>Create a New Book</h1>
    <form action="index.php" method="POST">
        <label for="title">Book Title:</label>
        <input type="text" id="title" name="title" required><br><br>

        <label for="author">Author:</label>
        <input type="text" id="author" name="author" required><br><br>

        <label for="genre">Genre:</label>
        <input type="text" id="genre" name="genre"><br><br>

        <label for="published_date">Published Date:</label>
        <input type="date" id="published_date" name="published_date"><br><br>

        <input type="submit" value="Create Book">
    </form>

    <h2>Book List</h2>
    <?php
    if ($result->num_rows > 0) {
        echo "<table border='1'>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Genre</th>
                    <th>Published Date</th>
                </tr>";
        while($row = $result->fetch_assoc()) {
            echo "<tr>
                    <td>" . $row["title"] . "</td>
                    <td>" . $row["author"] . "</td>
                    <td>" . $row["genre"] . "</td>
                    <td>" . $row["published_date"] . "</td>
                </tr>";
        }
        echo "</table>";
    } else {
        echo "No books found";
    }
    ?>
</body>
</html>

now lets set up ssh :

sudo apt install openssh-server

sudo systemctl start ssh

sudo ufw allow ssh
sudo ufw reload

ssh-keygen -t rsa -b 4096 -C "[your_email@example.com](mailto:your_email@example.com)"

# to get your server username or create a new user if you want with sudo useradd -m -s /bin/bash newusername
whoami

# to get your server ip
hostname -I

ssh-copy-id username@server_ip

then try :

ssh username@server_ip

Conclusion

By following these steps, you now have a fully functional web server capable of handling PHP applications, managing database interactions, and enabling secure remote access via SSH. This setup not only supports development but also lays the foundation for deploying real-world applications.

If you found this guide helpful, let me know! There are plenty more notes and articles on various topics to help you take your programming skills to the next level. I’d be happy to share more insights! 🚀

Handle 401 errors in a cleaner way with Axios interceptors

abdessamad idboussadel — Fri, 22 Mar 2024 03:45:47 +0000

In this article, we will discuss how to use interceptors to intercept your 401 error response or any response for that matter that you want to process. React will be utilized in the provided examples.

Axios interceptors function as middleware permitted by Axios to intercept requests or responses, enabling their processing before they reach their destination.

You can do a lot of things with interceptors, for example, sending a token alongside your request :



import axios from "axios";
import Cookies from "js-cookie";

const api = axios.create({
  baseURL: "http://localhost:8000",
  withCredentials: true,
  withXSRFToken: true,
  timeout: 6000,
  headers: {
    Accept: "application/json",
  },
});

api.interceptors.request.use((config) => {
  if (Cookies.get("token")) {
    config.headers["Authorization"] = "Bearer " + Cookies.get("token");
  }
  return config;
});

export default api;

You can be creative and utilize interceptors to make your code cleaner and more readable.

Handling 401 errors with interceptors in react

First we install :



npm i axios

and



npm i js-cookie

Then we create a new component ResponseInterceptor :



import { useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import api from "../services/api";
import Cookies from "js-cookie";

export const ResponseInterceptor = () => {
  const navigate = useNavigate();

  const interceptorId = useRef(null);

  useEffect(() => {
    interceptorId.current = api.interceptors.response.use(
      undefined,
      (error) => {
        switch (error.response.status) {
          case 401:
            Cookies.remove("token");
            localStorage.removeItem("userData");
            navigate("/");
            break;
          case 403:
          // your processing here
          default:
            return Promise.reject(error);
        }
      }
    );
  }, [navigate]);

  return null;
};

Then we import ResponseInterceptorin the main.jsx :



import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";
import { ResponseInterceptor } from "./components/ResponseInterceptor.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Router>
        <App />
        <ResponseInterceptor />
    </Router>
  </React.StrictMode>
);

In conclusion, Axios interceptors provide a powerful mechanism for intercepting and manipulating HTTP requests and responses in a flexible and centralized manner.

By utilizing interceptors, developers can implement various functionalities such as error handling, request/response logging, authentication token management, and more.

This approach enhances code modularity, readability, and maintainability by allowing common behaviors to be encapsulated and reused across multiple API calls.

This article was originally published on my website idboussadel.me.

15 Websites That Every Developer Should Know!

abdessamad idboussadel — Fri, 08 Dec 2023 18:11:20 +0000

This article is all about 15 awesome websites that can really help developers. Whether you're just starting or have been coding for a while, these sites are super useful.

Daily.dev :

Staying up-to-date in this field can be challenging due to its constant changes. This is where daily.dev comes in. It's a professional network for developers that provides the latest tech news and articles in one place.

Hackertab.dev :

It's an alternative to dailyDotDev. Hackertab lets you personalize your default tab page, incorporating news, tools, and events from prominent sources like GitHub Trending, Hacker News, DevTo, Medium, and Product Hunt.

Blogs :

- Dev.to :
Is a vibrant and inclusive community platform specifically designed for developers. It offers a social media-like experience where developers can share their knowledge, experiences, and insights through posts and discussions.

- Medium :
A versatile online publishing platform that caters to a wide range of topics, it provides a space for both individual writers and publications to share articles and insights. You will find valuable articles and information there.

- Hashnode :
it’s a developer-focused blogging platform that aims to simplify the process of creating and managing technical blogs.

Rapid API :

Is a platform That facilitates the integration of various APIs by giving You Access to a wide range of functions and services. Rapid API offers a centralized marketplace where developers can discover and utilize a variety of APIs. Some of these APIs are available for free, while others may require payment.

Hacker News :

Hacker News is a social news website that focuses on computer science, entrepreneurship, and technology-related topics. It is operated by Y Combinator, a well-known startup accelerator. Users submit and vote on articles, and the most popular ones rise to the top of the site.

roadmap.sh :

Roadmap.sh is a website that provides roadmaps, guides and other educational content to help guide developers in picking up a path and guide their learnings.

Reddit :

Reddit is an online platform where people share content and engage in discussions organized into various communities called "subreddits." Users can submit text posts, links, images, and videos, and the community votes to determine the visibility of content.

Snappify :

Snappify is a special platform made for creating cool and stunning presentations, with first-class support for code snippets.

Here are 2 other alternatives to Snappify :

carbon.now.sh :

ray.so :

TechCrunch :

Is an influential American online newspaper focusing on the tech scene, known for its early coverage of hot startups, breaking news, in-depth analysis, and lively writing style. It covers news, startups and entrepreneurship, and major tech events, and is a trusted resource for those in the tech industry.

Showwcase :

Is a platform to connect with fellow developers, showcase your code, get recruited, and level up your skills. Build your developer profile, share projects, access tutorials, and find opportunities, all in one centralized space.

When seeking inspiration for project ideas or Software as a Service (SaaS) concepts, I often turn to these websites, which serve as a gold mine for creative and innovative ideas :

Indiehackers :

Indie Hackers is a community and online platform built for independent entrepreneurs and aspiring "indie hackers." It focuses on supporting individuals building profitable online businesses and side projects.

Producthunt :

Product Hunt is a community-driven platform that showcases and discovers new products, services, and tech innovations. Entrepreneurs, makers, and enthusiasts submit their products, and the community votes, discusses, and provides feedback on these submissions.

Appsumo :

AppSumo is a daily deals website specializing in digital products and online services for entrepreneurs. It offers limited-time discounts on software, ebooks, courses, and other resources to help entrepreneurs grow their businesses and save money.
I leverage the platform to explore successful projects, seeking opportunities to recreate them with enhancements and additional features.

This article was originally published on my website idboussadel.me.

How to Become a 10x Dev

abdessamad idboussadel — Sat, 25 Nov 2023 15:17:03 +0000

Nowadays, everyone wants to be what we call a "10x developer." However, this term is often misunderstood and overvalued.
In essence, a productive or 10x developer, in my opinion, is someone who can use all the tools available to his advantage, by letting these tools take care of redundant and repetitive tasks and enabling him to focus on complex and creative work. Here are some tips and tricks to become a 10x developer:

Automate Repetitive Tasks with scripts:

Automating repetitive tasks through scripting is a game-changer for developers seeking to optimize their workflow.

By figuring out which tasks can be automated like testing and deployment and then letting scripts handle them, developers can focus on the more challenging parts of their job and save a bunch of time in the process.

For example, this script creates a new project folder, named by user input, and opens it in the file explorer:



import os
import subprocess

def create_project_folder(project_name):
    # Create a new folder for the project
    os.makedirs(project_name)

    # Open the project folder in the file explorer
    subprocess.run(['explorer', project_name])

# Get the project name from the user
project_name = input("Enter the name of your new project: ")

# Call the function to create and open the project folder
create_project_folder(project_name)

Keyboard Shortcuts Mastery :

Mastering keyboard shortcuts in your code editor or IDE is crucial for speeding up your coding workflow.

Some shortcuts exemples for VS code:

Ctrl + P: Quick file navigation, allowing you to open files by name.
Ctrl + Shift + L: Select all occurrences of the current word.
Ctrl + /: Toggle line comment
Ctrl + A: Selects all the lines in the current file
Ctrl + F: Finds a specific text in the code
Ctrl + Shift + P: Open the command palette for various commands.
Alt + Up/Down Arrow: Move the current line up or down.
Shift + Right Arrow (→): Select the character to the right of the cursor.
Shift + Left Arrow (←): Select the character to the left of the cursor.
Alt + Click: Hold down the Alt key and click at different locations in the code to create multiple cursors, allowing you to edit or type in those locations simultaneously.

Don't Over-Engineer:

Avoid the temptation to over-engineer your solutions. Adding unnecessary code or architectural complications is a common pitfall that many engineers and programmers encounter.

However, keeping it simple not only benefits your current workflow but also makes it easier for others to understand and collaborate on your code in the future.

Mastering Version Control Workflow:

Becoming good at using Version Control Workflow, like with Git, will tremendously boost your productivity and help your team to work together without stepping on each other's toes.

Especially with tools like GitKraken or any other GUI alternative that provides an intuitive interface that simplifies tasks like branching, merging, and tracking changes, making collaboration smoother.

And if something goes wrong, you can easily go back to how things were before. It's like having a safety net that makes sure everyone's work fits together smoothly, making the whole process of building software much faster and less stressful.

Utilize Existing Components and Libraries:

Instead of reinventing the wheel, use tried-and-tested solutions that are available. This not only saves time but also makes your code more reliable and efficient.

This approach allows you to focus more on the unique aspects of your project. It's a smart strategy to enhance productivity and create robust software without starting from scratch.

Embrace HTML Emmet for Rapid Prototyping :

Emmet is a toolkit for web developers that allows for quick and efficient coding through abbreviations.
If you are using HTML, Emmet can dramatically speed up the process of creating HTML structures.

example:



div>(header>ul>li*2>a)+footer>p

Output:



<div>

    <header>

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

Leverage AI Assistance:

GitHub Copilot : Is an AI-powered code completion tool developed by GitHub in collaboration with OpenAI. It transforms the way developers write code by generating intelligent suggestions and auto-completions as they type. It's one of the best AI tools I've tried so far.

TabNine : Is an AI-driven autocompletion extension for code editors. It goes beyond traditional autocompletion by using machine learning models to predict and suggest entire lines or blocks of code. Users can choose to use TabNine for free with some limitations or opt for the Pro version by subscribing to gain access to advanced functionalities.

Chatgpt : ChatGPT can be a real game-changer for your productivity. For instance, it can provide helpful examples, like suggesting an array for testing or helping reconstruct code snippets.

If you're stuck or need clarification on a programming concept, ChatGPT can offer quick and easy-to-understand explanations. It's like having a knowledgeable coding buddy who's available 24/7 to assist you with coding challenges, making your development process smoother and more efficient.

Extensions in VS code :

Extensions in VS Code can significantly boost productivity by adding functionality, automating tasks, and enhancing the development environment:

prettier : Prettier is an opinionated code formatter, it automatically formats your code to look clean and consistent, saving you from the hassle of manual formatting. With Prettier, your code becomes easy on the eyes, and you can focus more on writing logic rather than worrying about styling.

Auto rename tag: The Auto Rename Tag extension is like having a coding assistant for your HTML or XML. When you change the name of an opening tag, this extension automatically updates the closing tag to match.

Better Comments: The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations.

IntelliSense : IntelliSense is your coding sidekick, offering smart code completion and suggestions as you type. It anticipates your needs and provides relevant options, making coding more efficient.Some examples :

Peacock : Peacock is super helpful when you're working on lots of projects and jumping around between VSCode windows. It lets you link a color to each project, so whenever you open it, you can quickly see which window you're in by the color.

In conclusion, incorporating these strategies and tools can genuinely revolutionize your approach to coding, transforming you into a more efficient and effective developer. Embracing a 10x mindset not only enhances individual productivity but also positively contributes to your team. So, go ahead, implement these tips, and watch as your coding journey goes to a whole other level.

This article was originally published on my website idboussadel.me.

Forem: abdessamad idboussadel

Setting Up an Apache Server with PHP and SSH on Linux

1. Why php-mysql and not just mysql?

2. What is libapache2-mod-php?

sudo systemctl start apache2

sudo systemctl enable apache2

Configure the MySQL Database

Configure Apache to Serve Your PHP Site

6. Configure Apache for Network Access

Allow Remote MySQL Access

Conclusion

Handle 401 errors in a cleaner way with Axios interceptors

Handling 401 errors with interceptors in react

15 Websites That Every Developer Should Know!

Daily.dev :

Hackertab.dev :

Blogs :

Rapid API :

Hacker News :

roadmap.sh :

Reddit :

Snappify :

carbon.now.sh :

ray.so :

TechCrunch :

Showwcase :

Indiehackers :

Producthunt :

Appsumo :

How to Become a 10x Dev

Automate Repetitive Tasks with scripts:

Keyboard Shortcuts Mastery :

Don't Over-Engineer:

Mastering Version Control Workflow:

Utilize Existing Components and Libraries:

Embrace HTML Emmet for Rapid Prototyping :

Leverage AI Assistance:

Extensions in VS code :

1. Why `php-mysql` and not just `mysql`?

2. What is `libapache2-mod-php`?

`sudo systemctl start apache2`

`sudo systemctl enable apache2`