DEV Community: Sachin Sharma

PHP for Beginners: Building Your First Database-Driven Web App

Sachin Sharma — Sun, 05 Jan 2025 13:27:50 +0000

If you're just getting started with PHP, one of the most exciting projects you can undertake is building a database-driven web app. It’s a great way to understand how the backend works, interact with a database and bring dynamic content to your users.

In this tutorial, we’ll build a simple To-Do List App using PHP and MySQL. By the end, you’ll have a working application where users can add, view, and delete tasks.

Prerequisites

Before we dive in, make sure you have:

PHP (version 7.4 or above)
MySQL (or MariaDB)
A local server like XAMPP or Laragon
A code editor like VS Code

Step 1: Set Up Your Environment

Install your local server (e.g., XAMPP).
Start the Apache and MySQL services.
Navigate to your web root directory (htdocs for XAMPP) and create a new folder called todo_app.

Step 2: Create the Database

Open phpMyAdmin.
Create a new database called todo_app.
Run the following SQL query to create a tasks table:

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Step 3: Build the HTML Frontend

Create an index.php file in the todo_app folder and add the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <form action="add_task.php" method="POST">
            <input type="text" name="task" placeholder="Enter a new task" required>
            <button type="submit">Add Task</button>
        </form>

        <ul>
            <?php
            // Fetch tasks from the database
            $conn = new mysqli("localhost", "root", "", "todo_app");
            $result = $conn->query("SELECT * FROM tasks ORDER BY created_at DESC");

            while ($row = $result->fetch_assoc()) {
                echo "<li>" . $row['task'] . 
                " <a href='delete_task.php?id=" . $row['id'] . "'>Delete</a></li>";
            }

            $conn->close();
            ?>
        </ul>
    </div>
</body>
</html>

Step 4: Handle Adding Tasks

Create a new file called add_task.php and add the following code:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

Step 5: Handle Deleting Tasks

Create a new file called delete_task.php:

<?php
if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

Step 6: Add Some CSS (Optional)

Create a styles.css file in the same folder to style your app:

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

Step 7: Run Your Application

Open your browser and go to http://localhost/todo_app/index.php.
Add some tasks, view them, and delete them. 🎉

Congratulations! You’ve just built your first database-driven web app with PHP and MySQL. This simple project lays the foundation for creating more complex applications. Experiment with adding features like task prioritization or user authentication.

If you enjoyed this tutorial, drop a comment or share it with your fellow developers. Happy coding! 🚀

Hello, Dev Community! 🚀

Sachin Sharma — Sun, 05 Jan 2025 05:15:28 +0000

Hi everyone! 👋

I'm Sachin Sharma, a web developer based in Baddi, Himachal Pradesh. Over the past few years, I’ve had the opportunity to create 19+ web apps, receiving nearly a billion visits across my projects. It's been an incredible journey, and I'm here to connect, share, and learn from this amazing community.

A Bit About Me

🌐 Passionate about the web: From crafting online tools to building responsive and scalable applications, I love working with React, Angular JavaScript and PHP.
📈 SEO-Friendly Content: I focus on creating user-centric designs and functionality while keeping performance and discoverability at the forefront.
🛠️ Side Projects:
- Discussion Boards with profile pictures and upvote features.
- YouTube Analytics Tools for engagement and revenue analysis.
- Dynamic URL Shorteners with password protection and aliasing.
- Online Click Games with real-time updates and country-wise leaderboards.
- Cryptocurrency Conversion Tools using free APIs.
- Streak Systems to track user activity on websites.
- POS Systems for restaurants.
- WhatsApp Chat Export Viewer for visualizing chat history.

What I'm Currently Working On

An online POS system for my North Indian restaurant 🍛.
A tool to convert WhatsApp chat exports into visually engaging formats 📜.
Exploring ideas for gamified web experiences 🕹️.
Enhancing the functionality of OpenYT, an online tool to redirect social media traffic to the YouTube app.

Beyond Coding

🚴 Adventurer: Planning bike trips to explore the stunning landscapes of Himachal Pradesh.
🏋️‍♂️ Fitness Enthusiast: I recently started a 30-day gym vlog documenting my fitness journey (Not going as Intended).

Why I'm Here

I’m looking to:

Collaborate on exciting web development projects.
Share my knowledge through tutorials and articles.
Learn from this vibrant community of devs.

Let’s connect and create something awesome together! Feel free to drop a comment, ask questions, or just say hi. 😊

How 2 Hours Cost Me Tens of Thousands of Dollars

Sachin Sharma — Fri, 12 Jul 2024 17:41:06 +0000

I’m here to share a story about my laziness and how avoiding just 2 hours of work cost me dearly.

Back in 2021, I created a simple yet incredibly helpful tool for YouTube creators. It only took me 2-3 hours to develop, but it lacked a minor functionality that I figured I’d add in a future update.

Fast forward to 2022, the tool went viral. Hundreds of thousands of creators started using it, but it still lacked that one feature. Despite its popularity, I kept postponing the update.

It wasn’t until last week that I finally had some time to add the missing functionality. It took me just 2 hours, and almost immediately, I noticed a significant spike in users.

Many users had been avoiding my tool solely because it lacked that one feature. In just the past 5 days, I’ve seen a 35% increase in users on my site, all due to that particular function.

Now, I feel incredibly foolish for not doing this 2 years ago.

I’m sharing this so you can learn from my experience and maybe feel better about your own procrastination moments. 😅

Avoid These Pitfalls: A Programmer's Guide to Career Success

Sachin Sharma — Thu, 29 Feb 2024 04:21:04 +0000

In the world of programming, success isn't just about writing great code; it's also about avoiding common pitfalls that can derail your career. Let's explore some key things programmers should avoid for a brighter professional future.

Neglecting Soft Skills

While technical skills are important, don't overlook the value of soft skills like communication, teamwork, and problem-solving. Programmers who excel in these areas are better equipped to collaborate effectively with colleagues and deliver projects on time and within budget.

Failing to Stay Updated

Technology evolves rapidly, and staying current with the latest trends and tools is essential for career growth. Failing to invest time in learning new technologies can lead to obsolescence and limit your opportunities in the ever-changing tech landscape.

Ignoring Code Quality

Writing sloppy, poorly documented code may seem expedient in the short term, but it can lead to maintenance nightmares and decrease your value as a programmer. Always strive for clean, well-structured code that is easy to understand and maintain.

Working in Isolation

Collaboration is key in today's interconnected world. Avoid the temptation to work in isolation; instead, actively seek feedback from peers, contribute to open-source projects, and participate in developer communities to expand your knowledge and network.

Neglecting Self-Care

Long hours and tight deadlines are part of the job, but neglecting self-care can lead to burnout and negatively impact your performance. Make time for hobbies, exercise, and relaxation to maintain a healthy work-life balance and sustain your passion for programming.

Watch This Video Only If You Know Hindi and Can Bare Awful Audio and Unprofessional Description.

By avoiding these common pitfalls, programmers can set themselves up for long-term success in their careers. Remember, it's not just about writing code—it's about navigating the challenges of the profession with skill and foresight.

How Computers Generate Random Numbers

Sachin Sharma — Thu, 11 Nov 2021 18:57:00 +0000

Hey There..! I’m (AsliSachin) Back after a long break 😊. So today we’ll discuss How Computers Generate Random Numbers. So now without wasting much time let’s get right on the main content.

The Problem

Computers are specially and carefully programmed to eliminate randomness in results. They follow instructions blindly & are therefore completely predictable.

So, can computers generate truly random numbers?

Categorization

There are two categories of random numbers:

Pseudo-Random Number (PRN)
True Random Number (TRN) They have quite different characteristics.

PRN

Pseudo-Random Numbers are generated by using an algorithm so the results appear random, even though they aren’t.

For most applications, a Pseudo-Random Number is sufficient.

TRN

True Random numbers are generated by observing some outside data, like mouse movements of the fan noise, which is not predictable. The results might be slightly biased but they are not generated by a deterministic algorithm. Read More

Terms Every Android Dev Should Know

Sachin Sharma — Fri, 23 Jul 2021 15:21:53 +0000

Accelerometer

An accelerometer is a sensor that measures the acceleration of an object in order to determine the movement of a mobile device.

Gyroscope

An instrument that measures the orientation of a device in order to orient the display.

Emulator

The emulator is an application that duplicates the functionality of the hardware or operating system for testing purposes.

Native App

An application that is written in a programming language that is directly compatible with the target platform.

Native Bridge

The native bridge is an abstraction layer that gives non-application access to mobile device APIs.

WebView

A view that displays web pages within a mobile app.

Splash Screen

The first screen is visible to the user when the app is launched and used to display some illustrations and animations.

SDK

(Software Development Kit) A set of programming tools and resources built to aid software development on a particular platform.

Hybrid App

A mobile application is written on web technologies that use a web-to-native abstraction layer.

Useful Websites For Web Developers & Designers

Sachin Sharma — Tue, 14 Jan 2020 05:29:24 +0000

Today I’ve gathered a list of the most influential websites about web design and web development. I hope You Guys like them.

Can I Use

Caniuse.com provides up-to-date browser support table of front-end web technologies on desktop and mobile web browsers.

HtmlWasher

htmlwasher.com recuses a HTML document (or fragment) to basic HTML tags and attributes – clean HTML.

Enjoy CSS

enjoycss.com is an advanced CSS3 generator that allows you to get rid of routine coding.

Pexels

pexels.com provides high quality & completely free stock photos licenced under the Pexels licence.

Markup Validator

validator.w3.org is a free service by W3C that helps check the validity of Web documents.

Google Fonts

fonts.google.com is a library of free licenced fonts, an interactive web directory for browsing and conveniently using the fonts. Read More..

Do You Know Other Useful Websites, If yes, then share them with us using the comment box below.

6 Programming Trend Predictions for 2020

Sachin Sharma — Mon, 13 Jan 2020 10:42:30 +0000

Software development is one of the few businesses where one needs to be continually involved in learning new languages and programming tactics, as the trends keep on changing at an exponential rate. A programming language or technology stack does not have a long life in the field of software development unless it is reinvented and packed with a newer set of features from time to time.

Programming trend predictions for 2020:

PWAs Will Become Mainstream

There are way more web developers in the wild than native platform-specific developers. Companies and developers would love to save their money and time and reuse their resources.

Web Assembly Will See More Light

Wasm is designed as a portable target for compilation of languages like C, C++, & Rust. As the amount of data grows, it will be harder to keep a good performance & that’s where WA comes in handy.

Always Bet on JavaScript

The 2010s was the decade of JavaScript. We’ve seen a massive spike of JavaScript growth, and it doesn’t seem to be slowing down.

Rust Will Be More Important

We’ve seen four years of strong growth of the Rust language. 2020 can be the year Rust will officially become significant in the industry.

GraphQL Adoption Will Continue

As our applications grow in in complexity, so do our data consumptions needs. GraphQL is a superior solution to fetching data compared with a traditional REST API. It’s used by teams of all sizes.

Functional Programming Is Here to Stay

Modern popular programming languages like Kotlin, Dart, & Julia all support FP and its features. Functional programming is on the rise and it is becoming more widespread. Read More

What Are Your Predictions? Share Your Thoughts in the Comment Section below.