simple-php-contact-form-script
Home PHP

PHP Contact Form Module

simple-php-contact-form-script

Download and learn how this simple PHP Contact Form Script was made. Technologies used include PHP OOP, MySQL, Bootstrap and HTML5.

Contents of this page include:

Read more

php-web-page-content-management-system
Home PHP

PHP Content Management Module

php-web-page-content-management-system
Looking for PHP Contact Form Script? Click Here.

Download and learn how this simple PHP Web Page Content Management System was made. Technologies used include PHP OOP, MySQL, Bootstrap and jQuery.

Contents of this page include:

Read more

Home Lists+

Learning Progression

Here in codeofaninja.com, we usually have three LEVELS of source code output. But WHY? Because I believe in "Learning Progression" to ensure efficient learning.

Not all of us can swallow a lot of information all at once. So we do it one at a time. By different levels. This way, learners will be forced to learn the essential basics of the subject.

Accoding to Dr. W. James Popham, an Emeritus Professor in the UCLA Graduate School of Education and Information Studies:

"Learning Progression is a sequenced set of skills and knowledge we believe students must learn on the way to mastering a more distant curricular outcome."

You can read more about the subject here, here and here.

So if you really want to learn, and serious about learning from our programming tutorials: I highly recommend studying the LEVEL 1 source code first, then the LEVEL 2, then the LEVEL 3 source code.

Home JavaScript

React CRUD Tutorial – JavaScript Programming – Step By Step Guide!


Previously, we learned our jQuery AJAX CRUD tutorial. Today we will learn how to create or insert, read, update, and delete database records with React.

Our tutorial for today will cover the following contents:

1.0 Program Output
2.0 React: What, Why, Who and Think
3.0 Technologies Used In This Tutorial
4.0 Set Up The REST API

5.0 Basic Files & Folders
5.1 File Structure
5.2 Create index.html file
5.3 Create custom CSS file
5.4 Create main.component.js file
5.5 Create "products" scripts
5.5 Output

6.0 How To Read JSON Data Using React?
6.1 Create "Read Products" Component
6.2 Create "Top Actions" Component
6.3 Create "ProductsTable" component
6.4 Create "ProductRow" component
6.5 Output

7.0 How To Create or Insert Data Using React?
7.1 Create "CreateProductComponent" Class
7.2 Initialize component state
7.3 Handle form field changes
7.4 Handle "Save" button
7.5 Render "Create Product" HTML Form
7.6 Output

8.0 How To Read One Data Using React?
8.1 Create "ReadOneProductComponent" Class
8.2 Initialize component state
8.3 Render Component HTML
8.4 Output

9.0 How To Update Data Using React?
9.1 Create "UpdateProductComponent" Class
9.2 Initialize component state
9.3 Handle form field changes
9.4 Handle "Save Changes" button
9.5 Render "Update Product" HTML Form
9.6 Output

10.0 How To Delete Data Using React?
10.1 Create "DeleteProductComponent" Class
10.2 Change Page Title
10.3 Handle "Yes" Button
10.4 Render "Delete Confirmation" Box
10.5 Output

11.0 How To Run The Source Code?
12.0 Download LEVEL 1 Source Code
13.0 Download LEVEL 2 Source Code
14.0 Download ALL LEVELS

15.0 What's Next?
16.0 Related Tutorials
17.0 Online Resources
18.0 Some Notes

1.0 Program Output

Below are some screenshots of our tutorial's output. You can click an image to view the larger version of it. Use the left and right arrow to navigate through the screenshots.

1.1 LEVEL 1 Source Code Output


1.2 LEVEL 2 Source Code Output


The LEVEL 2 source code output proves that you can add and customize more features. It’s easier and faster if you will learn by following our tutorial below.

Downloading our source codes is your huge advantage as well. For now, let’s proceed to the step by step tutorial of our LEVEL 1 source code. Enjoy!

2.0 React: What, Why, Who and Think

2.1 What is React?

React is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

2.2 Why use React?

Using React allows you to simply express how your app should look at any given point in time. React will automatically manage all UI updates when your underlying data changes. When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

2.3 Who uses React?

Aside from Facebook and Instagram, many well-known companies uses React including: Dropbox, PayPal, Nextflix, Khan Academy, Airbnb, Alipay, Asana and many more.

2.4 Thinking in React

It is very important that we understand the thought process of building web apps with React. Here's a start: We start with a mock. Then, we break the UI into a component or parts of the UI. In the following image, you can see the mock and components in colored boxes.

thinking-in-react-components

I will not discuss this topic longer here. To learn more about how to think in React, click here.

Another point: Before, we code HTML and JavaScript separately on a web page. In React, we code HTML inside JavaScript. This is made possible through JSX. To learn more about JSX, click here.

React concepts can be hard to grasp at first, but you will get there. If you do actual coding with React, you will understand it better and faster. This is why our step-by-step React CRUD tutorial below will be very useful.

3.0 Technologies Used In This Tutorial

Here we will learn how to create, read update and delete database records - CRUD operations with PHP, MySQL, React, Babel, jQuery and Bootstrap.

Why do I use these technologies for this React CRUD tutorial? Here are my reasons:

  1. They work.
  2. Most audience of our blog are very familiar with these technologies.
  3. The goal of this tutorial is for you to learn how to use React.
  4. React is only the V in MVC.
  5. React don't make assumptions about the rest of your technology stack.

Now, let's take a look at the roles of each technology that we will use:

  • PHP - will handle server side script.
  • MySQL - will store our data.
  • React - will make our UI fast and interactive.
  • Babel - will compile our JavaScript so we don't have to wait for browser support.
  • jQuery - will do AJAX requests. React official docs shows jQuery examples.
  • Bootstrap - will make our UI look better.

For those who ask, React can work with AngularJS. In short, it can work with the MEAN (mongoDB, Express, AngularJS and NodeJS) framework. We will have another tutorial for that soon! Please subscribe so I can notify you when it is done.

4.0 Set Up The REST API

In this tutorial, we are going to use a REST API built with PHP.

We did not include REST API source code in this page because we want you to focus on learning how to code with React, not PHP.

But the good news is, we made a separate tutorial about how to build a simple REST API with PHP. Click here to learn the step-by-step PHP REST API tutorial.

I highly recommend learning our REST API tutorial first. This is because we are going to use that API for the rest of this tutorial.

But if you already have your own REST API that will work with this tutorial, that's okay as well.

In my case, one example where I can access the REST API is: http://localhost/api/product/read.php

That link will show me the list of products from the database, in JSON format. It looks like the following screenshot.

The data above will be consumed by our React app. The list of products will be displayed in Bootstrap table with buttons like "Read One", "Update" and "Delete". You will see it in the "How To Read JSON Data Using React?" section of this tutorial.

By the way, I'm using a Chrome extension called JSONView to make the JSON data readable in the browser.

5.0 Basic Files & Folders

5.1 File Structure

Our LEVEL 1 source code will have the following files and folders.

├─app/
├───assets/
├──────css/
├─────────custom.css
├───product/
├──────create_product.component.js
├──────delete_product.component.js
├──────product_table_row.component.js
├──────product_table.component.js
├──────read_one_product.component.js
├──────read_products.component.js
├──────top_actions.component.js
├──────update_product.component.js
├───main.component.js
├─index.html

The functions of each files above were explained in different sections of this tutorial.

5.2 Create index.html file

The index.html is the first file that will run on our browser. It contains our:

  • Bootstrap CSS - to make our web app look better.
  • Custom CSS - Bootstrap CSS cannot do it all so we need this custom styles.
  • Container DIV tag - our React application will be injected in this DIV tag.
  • React libraries - JavaScript files needed to run a React web application.
  • React custom codes - main custom codes of our React web application
  • jQuery library - will be used for AJAX requests. It is required by Bootstrap JavaScript as well.
  • Bootstrap JavaScript - needed to make use of more Bootstrap features like drop-down menu, etc.

Create index.html and put the following code.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LEVEL 1 - React CRUD Tutorial - codeofaninja.com</title>

    <!-- Bootstrap CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />

    <!-- Custom CSS -->
	<link href="app/assets/css/custom.css" rel="stylesheet" media="screen" />

</head>
<body>

    <!-- container -->
    <div class="container">

        <div class="page-header">
            <h1>Loading...</h1>
        </div>

        <!-- placeholder for rendering react components -->
        <div id='content'></div>

    </div>
	<!-- /container -->

<!-- react js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<!-- react code -->
<script type="text/babel" src="app/product/update_product.component.js"></script>
<script type="text/babel" src="app/product/create_product.component.js"></script>
<script type="text/babel" src="app/product/read_one_product.component.js"></script>
<script type="text/babel" src="app/product/delete_product.component.js"></script>
<script type="text/babel" src="app/product/product_table_row.component.js"></script>
<script type="text/babel" src="app/product/product_table.component.js"></script>
<script type="text/babel" src="app/product/top_actions.component.js"></script>
<script type="text/babel" src="app/product/read_products.component.js"></script>
<script type="text/babel" src="app/main.component.js"></script>

<!-- jQuery library required by bootsrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

5.3 Create custom CSS file

As said earlier, Bootstrap CSS cannot do it all so we need this custom styles.

  • Create "app" folder.
  • Create "assets" folder inside "app" folder.
  • Create "css" folder inside "assets" folder.
  • Create "custom.css" file inside "css" folder.
  • Open "custom.css" file and put the following code.
.text-align-center{ text-align:center; }
.margin-zero{ margin:0; }
.overflow-hidden{ overflow:hidden; }
.margin-bottom-1em{ margin-bottom:1em; }
.m-r-1em{ margin-right:1em; }

5.4 Create main.component.js file

Our "main component" will hold all other components of our react application.

Open "app" folder. Create "main.component.js" file. Put the following code.

// component that decides which main component to load: read or create/update
var MainApp = React.createClass({

	// initial mode is 'read' mode
    getInitialState: function(){
        return {
            currentMode: 'read',
            productId: null
        };
    },

	// used when use clicks something that changes the current mode
    changeAppMode: function(newMode, productId){
        this.setState({currentMode: newMode});
            if(productId !== undefined){
            this.setState({productId: productId});
        }
    },

	// render the component based on current or selected mode
    render: function(){

        var modeComponent =
            <ReadProductsComponent
            changeAppMode={this.changeAppMode} />;

        switch(this.state.currentMode){
            case 'read':
                break;
            case 'readOne':
                modeComponent = <ReadOneProductComponent productId={this.state.productId} changeAppMode={this.changeAppMode}/>;
                break;
            case 'create':
                modeComponent = <CreateProductComponent changeAppMode={this.changeAppMode}/>;
                break;
            case 'update':
                modeComponent = <UpdateProductComponent productId={this.state.productId} changeAppMode={this.changeAppMode}/>;
                break;
            case 'delete':
                modeComponent = <DeleteProductComponent productId={this.state.productId} changeAppMode={this.changeAppMode}/>;
                break;
            default:
                break;
        }

        return modeComponent;
    }
});

// go and render the whole React component on to the div with id 'content'
ReactDOM.render(
    <MainApp />,
    document.getElementById('content')
);

5.5 Create "products" scripts

We need several JavaScript files that contains React code to make our application work.

Open "app" folder. Create "product" folder inside "app" folder.

Create the following JavaScript files.

  • update_product.component.js
  • create_product.component.js
  • read_one_product.component.js
  • delete_product.component.js
  • product_table_row.component.js
  • product_table.component.js
  • top_actions.component.js
  • read_products.component.js

Currently, those JavaScript files are empty. Where are the codes?

We will see the codes on the next several sections of this tutorial.

5.6 Output

Since our JavaScript files are empty, the output of all we did above is a blank page.

See it for yourself by running http://localhost/react-crud-level-1/index.html on your browser.

6.0 How To Read JSON Data Using React?

6.1 Create "Read Products" Component

This component will hold the product records using an HTML table. It will hold the "create product" button as well. The button or "top actions" are located on the upper right corner of this component.

Open "app" folder.
Open "products" folder inside "app" folder.
Open "read_products.component.js" file.
Put the following code in it and save it.

// component that contains all the logic and other smaller components
// that form the Read Products view
window.ReadProductsComponent = React.createClass({
    getInitialState: function() {
        return {
            products: []
        };
    },

    // on mount, fetch all products and stored them as this component's state
    componentDidMount: function() {

        this.serverRequest = $.get("http://localhost/api/product/read.php", function (products) {
            this.setState({
                products: products.records
            });
        }.bind(this));
    },

    // on unmount, kill product fetching in case the request is still pending
    componentWillUnmount: function() {
        this.serverRequest.abort();
    },

    // render component on the page
    render: function() {
        // list of products
        var filteredProducts = this.state.products;
        $('.page-header h1').text('Read Products');

        return (
            <div className='overflow-hidden'>
                <TopActionsComponent changeAppMode={this.props.changeAppMode} />

                <ProductsTable
                    products={filteredProducts}
                    changeAppMode={this.props.changeAppMode} />
            </div>
        );
    }
});

6.2 Create "Top Actions" Component

The previous section makes use of "TopActionsComponent". This component holds our "create product" button. You can add more buttons in this component. For now, we have only one.

Still in the "product" folder. Open "top_actions.component.js" file.
Put the following code in it and save it.

// component that contains the functionalities that appear on top of
// the products table: create product
window.TopActionsComponent = React.createClass({
    render: function(){
        return (
            <div>
                <a href='#'
                    onClick={() => this.props.changeAppMode('create')}
                    className='btn btn-primary margin-bottom-1em'> Create product
                </a>
            </div>
        );
    }
});

6.3 Create "ProductsTable" Component

We previously made use of "ProductsTable" component as well. This will hold the table header and table rows with products data.

Still in the "product" folder. Open "product_table.component.js" file.
Put the following code in it and save it.

// component for the whole products table
window.ProductsTable = React.createClass({
    render: function() {

    var rows = this.props.products
        .map(function(product, i) {
            return (
                <ProductRow
                    key={i}
                    product={product}
                    changeAppMode={this.props.changeAppMode} />
            );
        }.bind(this));

        return(
            !rows.length
                ? <div className='alert alert-danger'>No products found.</div>
                :
                <table className='table table-bordered table-hover'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Category</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
        );
    }
});

6.4 Create "ProductRow" Component

On the previous section, we used the "ProductRow" component. This component will hold a table row with product data. It will hold three buttons as well. The "Read One", "Edit" and "Delete" product button.

Still in the "product" folder. Open "product_table_row.component.js" file.
Put the following code in it and save it.

// component that renders a single product
window.ProductRow = React.createClass({
    render: function() {
    return (
        <tr>
            <td>{this.props.product.name}</td>
            <td>{this.props.product.description}</td>
            <td>${parseFloat(this.props.product.price).toFixed(2)}</td>
            <td>{this.props.product.category_name}</td>
            <td>
                <a href='#'
                    onClick={() => this.props.changeAppMode('readOne', this.props.product.id)}
                    className='btn btn-info m-r-1em'> Read One
                </a>
                <a href='#'
                    onClick={() => this.props.changeAppMode('update', this.props.product.id)}
                    className='btn btn-primary m-r-1em'> Edit
                </a>
                <a
                    onClick={() => this.props.changeAppMode('delete', this.props.product.id)}
                    className='btn btn-danger'> Delete
                </a>
            </td>
        </tr>
        );
    }
});

6.5 Output

If we completed the steps above, the output should be an HTML table with product data on each table row. The "Read One", "Edit" and "Delete" buttons should be seen on each table row as well.

7.0 How To Create or Insert Data Using React?

7.1 Create "CreateProductComponent" Class

The "CreateProductComponent" class will contain the logic and HTML of our app's "Create Product" feature.

Place the following code inside create_product.component.js file and save it.

window.CreateProductComponent = React.createClass({
	// initial component states will be here
});

7.2 Initialize component state

We need to initialize states for this component. Usually, initial states are empty as seen in the getInitialState method.

When component was mounted, we will get the list of categories from the API. The returned categories will be used in the form's "categories" dropdown field.

When component was unmounted, we need to stop the server request, just in case the request is still pending.

Replace "// initial component states will be here" of the previous section with the following code.

// initialize values
getInitialState: function() {
	return {
		categories: [],
		selectedCategoryId: -1,
		name: '',
		description: '',
		price: '',
		successCreation: null
	};
},

// on mount, get all categories and store them in this component's state
componentDidMount: function() {
	this.serverRequest = $.get("http://localhost/api/category/read.php", function (categories) {
		this.setState({
			categories: categories.records
		});
	}.bind(this));

	$('.page-header h1').text('Create product');
},

// on unmount, stop getting categories in case the request is still loading
componentWillUnmount: function() {
	this.serverRequest.abort();
},

// handle form field changes here

7.3 Handle form field changes

We need methods to keep track of change on our form fields. As user types or changes a field's value, it is saved to the component's state.

Replace "// handle form field changes here" of the previous section with the following code.

// handle category change
onCategoryChange: function(e) {
	this.setState({selectedCategoryId: e.target.value});
},

// handle name change
onNameChange: function(e) {
	this.setState({name: e.target.value});
},

// handle description change
onDescriptionChange: function(e) {
	this.setState({description: e.target.value});
},

// handle price change
onPriceChange: function(e) {
	this.setState({price: e.target.value});
},

// handle save button here

7.4 Handle "Save" button

When user clicks the "save" button, form data must be sent to the API. This way, data will be saved on the database.

We need the "onSave" method to handle this event.

Replace "// handle save button here" of the previous section with the following code.

// handle save button clicked
onSave: function(e){

	// data in the form
	var form_data={
		name: this.state.name,
		description: this.state.description,
		price: this.state.price,
		category_id: this.state.selectedCategoryId
	};

	// submit form data to api
	$.ajax({
		url: "http://localhost/api/product/create.php",
		type : "POST",
		contentType : 'application/json',
		data : JSON.stringify(form_data),
		success : function(response) {

			// api message
			this.setState({successCreation: response['message']});

			// empty form
			this.setState({name: ""});
			this.setState({description: ""});
			this.setState({price: ""});
			this.setState({selectedCategoryId: -1});

		}.bind(this),
		error: function(xhr, resp, text){
			// show error to console
			console.log(xhr, resp, text);
		}
	});

	e.preventDefault();
},

// render component here

7.5 Render "Create Product" HTML Form

Now you're asking: Where's the HTML form?

Our HTML form is in the "render" method.

Replace "// render component here" of the previous section with the following code.

render: function() {

    // make categories as option for the select tag.
    var categoriesOptions = this.state.categories.map(function(category){
        return (
            <option key={category.id} value={category.id}>{category.name}</option>
        );
    });

    /*
    - tell the user if a product was created
    - tell the user if unable to create product
    - button to go back to products list
    - form to create a product
    */
    return (
    <div>
        {

            this.state.successCreation == "Product was created." ?
                <div className='alert alert-success'>
                    Product was saved.
                </div>
            : null
        }

        {

            this.state.successCreation == "Unable to create product." ?
                <div className='alert alert-danger'>
                    Unable to save product. Please try again.
                </div>
            : null
        }

        <a href='#'
            onClick={() => this.props.changeAppMode('read')}
            className='btn btn-primary margin-bottom-1em'> Read Products
        </a>


        <form onSubmit={this.onSave}>
            <table className='table table-bordered table-hover'>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td>
                        <input
                        type='text'
                        className='form-control'
                        value={this.state.name}
                        required
                        onChange={this.onNameChange} />
                    </td>
                </tr>

                <tr>
                    <td>Description</td>
                    <td>
                        <textarea
                        type='text'
                        className='form-control'
                        required
                        value={this.state.description}
                        onChange={this.onDescriptionChange}>
                        </textarea>
                    </td>
                </tr>

                <tr>
                    <td>Price ($)</td>
                    <td>
                        <input
                        type='number'
                        step="0.01"
                        className='form-control'
                        value={this.state.price}
                        required
                        onChange={this.onPriceChange}/>
                    </td>
                </tr>

                <tr>
                    <td>Category</td>
                    <td>
                        <select
                        onChange={this.onCategoryChange}
                        className='form-control'
                        value={this.state.selectedCategoryId}>
                        <option value="-1">Select category...</option>
                        {categoriesOptions}
                        </select>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <button
                        className='btn btn-primary'
                        onClick={this.onSave}>Save</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    );
}

7.6 Output

When you click the "Create Product" button, output that you should see is an HTML form with fields: Name, description, price and category drop-down list. A "Save" button should be seen as well.

Try to fill-out the form and click the "Save" button. Click the "Read Products" button and see if your record is in the list. If it's there, it means our React app is working.

8.0 How To Read One Data Using React?

8.1 Create "ReadOneProductComponent" Class

The "ReadOneProductComponent" class will contain the logic and HTML of our app's "Read One Product" feature.

// component that contains the logic to read one product
window.ReadOneProductComponent = React.createClass({
	// initial component state will be here
});

8.2 Initialize component state

Initial states are empty as seen in the getInitialState method.

When component was mounted, we will get the product data from the API. The returned data will be set to component state. The state's value will be used in HTML table.

When component was unmounted, we need to stop the server request, just in case the request is still pending.

Replace "// initial component state will be here" of the previous section with the following code.

getInitialState: function() {
    // Get this product fields from the data attributes we set on the
    // #content div, using jQuery
    return {
        id: 0,
        name: '',
        description: '',
        price: 0,
        category_name: ''
    };
},

// on mount, read product data and them as this component's state
componentDidMount: function(){

    var productId = this.props.productId;

    this.serverRequestProd = $.get("http://localhost/api/product/read_one.php?id=" + productId,
        function (product) {
            this.setState({category_name: product.category_name});
            this.setState({id: product.id});
            this.setState({name: product.name});
            this.setState({description: product.description});
            this.setState({price: product.price});
        }.bind(this));

    $('.page-header h1').text('Read Product');
},

// on unmount, kill categories fetching in case the request is still pending
componentWillUnmount: function() {
    this.serverRequestProd.abort();
},

// render component html will be here

8.3 Render Component HTML

We will use the "render" method again to render this "ReadOneProductComponent" HTML on the web page.

Replace "// render component html will be here" of the previous section with the following code.

render: function() {

    return (
        <div>
            <a href='#'
                onClick={() => this.props.changeAppMode('read')}
                className='btn btn-primary margin-bottom-1em'>
                Read Products
            </a>

            <form onSubmit={this.onSave}>
                <table className='table table-bordered table-hover'>
                    <tbody>
                    <tr>
                        <td>Name</td>
                        <td>{this.state.name}</td>
                    </tr>

                    <tr>
                        <td>Description</td>
                        <td>{this.state.description}</td>
                    </tr>

                    <tr>
                        <td>Price ($)</td>
                        <td>${parseFloat(this.state.price).toFixed(2)}</td>
                    </tr>

                    <tr>
                        <td>Category</td>
                        <td>{this.state.category_name}</td>
                    </tr>

                    </tbody>
                </table>
            </form>
        </div>
    );
}

8.4 Output

When you click the "Read One" button, you should see an HTML table with a product's data. The "Read Products" button should be seen as well.

9.0 How To Update Data Using React?

9.1 Create "UpdateProductComponent" Class

The "UpdateProductComponent" class will contain the logic and HTML of our app's "Update Product" feature.

// component that contains the logic to update a product
window.UpdateProductComponent = React.createClass({
	// initial component states will be here
});

9.2 Initialize component state

Initial component states are empty as seen in the getInitialState method.

When component was mounted, we will get the list of categories from the API. The returned categories will be used in the form's "categories" dropdown field. We get a product data based on given product ID as well. This will fill out the "update product" form.

When component was unmounted, we need to stop both server requests, just in case any of the request is still pending.

Replace "// initial component states will be here" of the previous section with the following code.

getInitialState: function() {
    // Get this product fields from the data attributes we set on the
    // #content div, using jQuery
    return {
        categories: [],
        selectedCategoryId: 0,
        id: 0,
        name: '',
        description: '',
        price: 0,
        successUpdate: null
    };
},

// on mount, fetch all categories and one product data to stored them as this component's state
componentDidMount: function(){

	// read categories
    this.serverRequestCat = $.get("http://localhost/api/category/read.php",
        function (categories) {
            this.setState({
                categories: categories.records
            });
        }.bind(this));

	// read one product data
    var productId = this.props.productId;
    this.serverRequestProd = $.get("http://localhost/api/product/read_one.php?id=" + productId,
        function (product) {
            this.setState({selectedCategoryId: product.category_id});
            this.setState({id: product.id});
            this.setState({name: product.name});
            this.setState({description: product.description});
            this.setState({price: product.price});
        }.bind(this));

    $('.page-header h1').text('Update product');
},

// on unmount, kill categories fetching in case the request is still pending
componentWillUnmount: function() {
    this.serverRequestCat.abort();
    this.serverRequestProd.abort();
},

// handle form field changes here

9.3 Handle form field changes

We need methods to keep track of any input changes on our form fields. As user types or changes a field's value, it is saved to the component's state.

Replace "// handle form field changes here" of the previous section with the following code.

// handle category change
onCategoryChange: function(e){
    this.setState({selectedCategoryId: e.target.value});
},

// handle name change
onNameChange: function(e){
    this.setState({name: e.target.value});
},

// handle description change
onDescriptionChange: function(e){
    this.setState({description: e.target.value});
},

// handle price change
onPriceChange: function(e){
    this.setState({price: e.target.value});
},

// handle save changes button here

9.4 Handle "Save Changes" button

When user clicks the "Save Changes" button, form data must be sent to the API. The updated data will be saved on the database.

We will create the "onSave" method to handle this event.

Replace "// handle save changes button here" of the previous section with the following code.

// handle save changes button clicked
onSave: function(e){

    // data in the form
    var form_data={
        id: this.state.id,
        name: this.state.name,
        description: this.state.description,
        price: this.state.price,
        category_id: this.state.selectedCategoryId
    };

    // submit form data to api
    $.ajax({
        url: "http://localhost/api/product/update.php",
        type : "POST",
        contentType : 'application/json',
        data : JSON.stringify(form_data),
        success : function(response) {
            this.setState({successUpdate: response['message']});
        }.bind(this),
        error: function(xhr, resp, text){
            // show error to console
            console.log(xhr, resp, text);
        }
    });

    e.preventDefault();
},

// render component here

9.5 Render "Update Product" HTML Form

Now you're asking: Where's the HTML form filled-out with product data?

Our HTML form is in the "render" method below.

Replace "// render component here" of the previous section with the following code.

render: function() {
    var categoriesOptions = this.state.categories.map(function(category){
        return (
            <option key={category.id} value={category.id}>{category.name}</option>
        );
    });

    return (
        <div>
            {
                this.state.successUpdate == "Product was updated." ?
                    <div className='alert alert-success'>
                        Product was updated.
                    </div>
                : null
            }

            {
                this.state.successUpdate == "Unable to update product." ?
                    <div className='alert alert-danger'>
                        Unable to update product. Please try again.
                    </div>
                : null
            }

            <a href='#'
                onClick={() => this.props.changeAppMode('read')}
                className='btn btn-primary margin-bottom-1em'>
                Read Products
            </a>

            <form onSubmit={this.onSave}>
                <table className='table table-bordered table-hover'>
                    <tbody>
                    <tr>
                        <td>Name</td>
                        <td>
                            <input
                                type='text'
                                className='form-control'
                                value={this.state.name}
                                required
                                onChange={this.onNameChange} />
                        </td>
                    </tr>

                    <tr>
                        <td>Description</td>
                        <td>
                            <textarea
                                type='text'
                                className='form-control'
                                required
                                value={this.state.description}
                                onChange={this.onDescriptionChange}></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td>Price ($)</td>
                        <td>
                            <input
                                type='number'
                                step="0.01"
                                className='form-control'
                                value={this.state.price}
                                required
                                onChange={this.onPriceChange}/>
                        </td>
                    </tr>

                    <tr>
                        <td>Category</td>
                        <td>
                            <select
                                onChange={this.onCategoryChange}
                                className='form-control'
                                value={this.state.selectedCategoryId}>
                                <option value="-1">Select category...</option>
                                {categoriesOptions}
                                </select>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <button
                                className='btn btn-primary'
                                onClick={this.onSave}>Save Changes</button>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </form>
        </div>
    );
}

9.6 Output

When you click the "Edit" button, output that you should see is an HTML form with fields: Name, description, price and category drop-down list. These field must be filled out with product data to be edited.

A "Save" button should be seen as well.

Try to edit the form and click the "Save Changes" button. Click the "Read Products" button and see if your record was updated in the list. If it's there, it means our React app is working.

10.0 How To Delete Data Using React?

10.1 Create "DeleteProductComponent" Class

The "DeleteProductComponent" class will contain the logic and HTML of our app's "Delete Product" feature.

// component that contains the logic to delete a product
window.DeleteProductComponent = React.createClass({
	// componentDidMount will be here
});

10.2 Change Page Title

When this component was mounted, we'll just have to change the page title.

Replace "// componentDidMount will be here" of the previous section with the following code.

// on mount, change header text
componentDidMount: function(){
	$('.page-header h1').text('Delete Product');
},

// onDelete will be here

10.3 Handle "Yes" Button

If user clicked the "Yes" button, record will be deleted. It triggers our "onDelete" method below.

Replace "// onDelete will be here" of the previous section with the following code.

// handle single row deletion
onDelete: function(e){

    // product to delete
    var productId = this.props.productId;

    // submit form data to api
    $.ajax({
        url: "http://localhost/api/product/delete.php",
        type : "POST",
        contentType : 'application/json',
        data : JSON.stringify({'id' : productId}),
        success : function(response) {
            this.props.changeAppMode('read');
        }.bind(this),
        error: function(xhr, resp, text){
            // show error in console
            console.log(xhr, resp, text);
        }
    });
},

// render will be here

10.4 Render "Delete Confirmation" Box

Our "render" method contains the message prompt HTML. It asks the user if he's sure to delete a record.

Replace "// render will be here" of the previous section with the following code.

render: function(){

    return (
        <div className='row'>
            <div className='col-md-3'></div>
            <div className='col-md-6'>
                <div className='panel panel-default'>
                	<div className='panel-body text-align-center'>Are you sure?</div>
                	<div className='panel-footer clearfix'>
                		<div className='text-align-center'>
                            <button onClick={this.onDelete}
                                className='btn btn-danger m-r-1em'>Yes</button>
                            <button onClick={() => this.props.changeAppMode('read')}
                                className='btn btn-primary'>No</button>
                		</div>
                	</div>
                </div>
            </div>
            <div className='col-md-3'></div>
        </div>
    );
}

10.5 Output

When user click the "Delete" button, a message prompt will be shown. It asks the user to confirm the deletion of a record. Specifically, message will say "Are you sure?".

If user clicked "Yes", record will be deleted from the database. User will be redirected to the product list. If user clicked "No", user will be redirected to the product list.

11.0 How To Run The Source Code?

We highly recommend for you to follow and study our well-detailed, step-by-step tutorial above first. Nothing beats experience when it comes to learning.

But we believe you will learn faster if you'll see the final source code as well. We consider it as your additional guide.

Imagine the value or skill upgrade it can bring you. The additional income you can get from your work, projects or business. The precious time you save. Isn't that what you want?

By now, you need to download our source codes. To do it, use any download buttons in the next few sections below.

Once you downloaded the source codes, here's how you can run it.

  1. Extract the files to your server directory.
  2. Set up the "api" by following the README.txt inside the "api" folder.
  3. Open your browser and run index.html
  4. If you can see the list of "product" records, it means your set up is correct.

12.0 Download LEVEL 1 Source Code

FEATURES LEVEL 1
PDO extension used YES
Bootstrap UI enabled YES
Facebook React YES
Create product YES
Read product YES
Update product YES
Delete product YES
Category selection for create and update product. YES
Price display with dollar sign YES
SQL file in "dev" folder YES
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

13.0 Download LEVEL 2 Source Code

FEATURES LEVEL 2
All features of LEVEL 1 above YES
Search records YES
Show records when search box is empty YES
Routing works for search, page, create, edit and delete pages YES
Export CSV YES
Multiple delete YES
Pagination YES
Pagination in search YES
Go to page number YES
Limit go to page number based on number of pages YES
Buttons with glyphicons YES
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

14.0 Download ALL LEVELS

This means you will download the LEVEL 1 and LEVEL 2 source codes in separate packages. Select "ALL LEVELS" below and then you click the "Download Now" button.

Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Do you need more reasons to download it?

MORE REASONS TO DOWNLOAD THE CODE ALL
Use new skills for your multiple projects YES
Save huge amount of time learning React & PHP Rest API YES
Code examples are direct to the point YES
Well explained and commented source code YES
Fast and friendly email support YES
Free source code updates YES

15.0 What's Next?

Next, we will learn how to create, read, update and delete records with AngularJS, also known as Angular 1.x. Click the following link: AngularJS CRUD Tutorial

16.0 Related Tutorials

17.0 Online Resources

Here are useful resources related to React.

18.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. Get a FREE EBOOK as well. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

Thanks for reading our step by step tutorial about React CRUD Tutorial!

php-product-catalog-script
Home PHP

PHP Product Catalog Module

php-product-catalog-script

Note

Before You Download, make sure you have basic understanding of these topics:

a. PHP Object Oriented CRUD Example with Bootstrap

b. Apache .htaccess RewriteRule Examples with PHP

Demo Link

Experience the live demo by sending a request to mike@codeofaninja.com, your email subject must be "DEMO Request: PHP Product Catalog Script".

Features List

FEATURE ACCESS LEVEL Source Code
USER MANAGEMENT
User type: Admin Admin Yes
Interface for admin Admin Yes
Login page Admin Yes
Log out Admin Yes
PRODUCT MANAGEMENT
Create product Admin Yes
Read products Admin Yes
Update product Admin Yes
Delete product Admin Yes
Search product Admin & Customer Yes
Product lists with pagination Admin & Customer Yes
View inactive products Admin Yes
View products under a category Admin & Customer Yes
Product list under a category with pagination Admin & Customer Yes
Upload product images, you can select many images at once Admin Yes
View product images with thumbnails Admin & Customer Yes
Delete product image with X icon Admin Yes
Upload product PDFs , you can select many PDF files at once Admin Yes
List product PDF Admin Yes
Delete product PDF Admin Yes
View single product with related information Customer Yes
View single product with add to cart button Customer Yes
View single product with image slider Customer Yes
View single product with SEO friendly URL (.htaccess file used) Customer Yes
Rich text editor for product description when adding or editing product Admin Yes
Quantity value must be more than 1 Customer Yes
Sorting by fields Admin Yes
CATEGORY MANAGEMENT
Create category Admin Yes
Read categories Admin Yes
Update category Admin Yes
Delete category Admin Yes
Search category Admin Yes
Category list with pagination Admin Yes
Category search result with pagination Admin Yes
View products under a product category Admin & Customer Yes
Auto update category drop down in create or update product form Admin Yes
Auto update categories in navigation bar Admin & Customer Yes
Highlight selected category in navigation Admin & Customer Yes
SECURITY
Login user with hashed password validation Customer & Admin Yes
Used PDO bindParam() to prevent SQL injection in all MySQL queries Developer Yes
Used PHP htmlspecialchars() and strip_tags() to prevent XSS attacks Developer Yes
MORE REASONS TO DOWNLOAD IT
Object oriented programming source code Developer Yes
Bootstrap user interface Developer Yes
PDO extension used Developer Yes
Page title navigation with links Developer Yes
Radio button looks like a switch Developer Yes
Icon in all create, edit and delete buttons Developer Yes
All source code files organized by folders Developer Yes
Database configuration file in config folder Developer Yes
SQL file and READ-ME.txt in “sql” folder Developer Yes
SQL file and READ-ME.txt in "dev" folder Developer Yes
Database design and data dictionary in "dev" folder Developer Yes
Free source code updates / new features update Developer Yes
Free support for 6 months Developer Yes
Buy once, use for unlimited number of sites Developer Yes
One-time payment, no recurring payment Developer Yes

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Simple Configuration

Source code simple configuration when you install:

1. This system works with PHP 5.4+

2. In your PhpMyAdmin, create a database "php_product_catalog"

3. Import the SQL file php_product_catalog.sql in the "dev" folder

4. Rewrite module must be enable in your apache server

5. Change rewrite base directory in line 7 of .htaccess file

6. Configure $home_url in /config/core.php

7. Configure database in /config/database.php

8. User Login
Admin Section Login
Username: mike@example.com
Password: ninja12qw!@QW

Thanks For Your Help!

Contact me if you have any questions about the code, I'll be more than happy to help and support you!

My email is mike@codeofaninja.com, you can also contact me via our official Facebook page.

Thank you visiting our for PHP Product Catalog Script page!

php-online-shopping-cart-source-code
Home PHP

PHP Shopping Cart Module

php-online-shopping-cart-source-code
Contents of this post include:

1.0 Output Preview & Demo Link
2.0 Pre-Requisites
3.0 Cart Data Storage
4.0 File Structure
5.0 What People Say?
6.0 Features List & Download
7.0 Simple Set Up
8.0 Need More Features?pu
9.0 Related Source Codes
10.0 Get In Touch

1.0 Output Preview & Demo Link

The following slideshow is the output preview of this source code.

Customer Section Output Preview:


Admin Section Output Preview:


If you need the live demo link, send a request to mike@codeofaninja.com with subject "PHP Shopping Cart Module", thank you!

Note: The "PHP Shopping Cart Module" is also called the "LEVEL 3 source code" of our PHP Shopping Cart Tutorials - PHP SESSIONS, PHP COOKIES and MySQL.

2.0 Pre-Requisites

Before you download, make sure you have basic understanding of these topics:

a. PHP Object Oriented CRUD Example with Bootstrap
b. Apache .htaccess RewriteRule Examples with PHP

3.0 Cart Data Storage

This source code takes advantage of PHP SESSIONS, PHP COOKIES and MySQL when storing cart data.

  • We use PHP COOKIES to save site visitor's user_id locally.
  • We use PHP SESSIONS as back up just in case cookies are disabled in user's browser.
  • We use MySQL to store cart items in the database.
  • This way, cart items can be resurrected even if user closed his browser, logged out or logged in another computer.

Here's the logic:

IF cookies are enabled, AND if user is logged in, we save 'session user_id' to 'user_id variable'. The value of 'user_id variable' is very important because we use it to save 'user_id' both in PHP 'cookie' and 'session'.

IF cookies are enabled, AND if user is not logged in, AND if user already have a 'cookie user_id' token, we save 'cookie user_id' to 'user_id variable'.

IF cookies are enabled, AND if user is not logged in, AND if 'cookie user_id' is not set (it means, visitor never used the cart before), we get new token as 'user_id variable' value.

IF cookies are enabled, AND user is logged in OR not logged in, we set 'cookie user_id' and 'session user_id' with the final 'user_id variable' value. This will retrieve the cart data with the same 'user_id' from MySQL database.

IF cookies are disabled, AND user is logged in, we maintain 'session user_id'.

IF cookies are disabled, AND user is not logged in, we get new token and save it to 'session user_id'.

Important Note: The statements above can be understood more clearly if you will see the code implementation on /config/core.php line 26 onwards.

4.0 File Structure

The following folders and files are included in our source code. It will have more meaning if you will see the code inside the folders and files.
├─ admin/
├─── category.php
├─── change_order_status.php
├─── create_product.php
├─── create_user.php
├─── create_image.php
├─── delete_pdf.php
├─── delete_product.php
├─── delete_user.php
├─── layout_foot.php
├─── layout_head.php
├─── login_checker.php
├─── navigation.php
├─── order_history.php
├─── paging.php
├─── read_inactive_products.php
├─── read_one_order.php
├─── read_orders_template.php
├─── read_orders.php
├─── read_products_sorted_by_fields.php
├─── read_products_template.php
├─── read_products.php
├─── read_users_template.php
├─── read_users.php
├─── search_orders.php
├─── search_products.php
├─── search_users.php
├─── update_product.php
├─── update_user.php
├─ config/
├─── core.php
├─── database.php
├─ dev/
├─── shop_cart_ordering_module.sql
├─── readme.txt
├─ images/
├─ libs/
├─── css/
├────── bootstrap/
├────── admin.css
├────── user.css
├─── js/
├────── bootstrap-image-gallery/
├────── jquery-ui/
├────── yellow-text/
├────── bootbox.min.js
├────── custom-script.js
├────── jquery.js
├─── php/
├────── php-mailer/
├────── pw-hashing/
├────── utils.php
├─ objects/
├─── cart_item.php
├─── category.php
├─── order_item.php
├─── order.php
├─── product_image.php
├─── product_pdf.php
├─── product.php
├─── user.php
├─ uploads/
├─── images/
├─── pdfs/
├─ .htaccess
├─ add_to_cart.php
├─ cart.php
├─ category.php
├─ checkout.php
├─ empty_cart.php
├─ info.php
├─ layout_foot.php
├─ layout_head.php
├─ login_checker.php
├─ login.php
├─ logout.php
├─ navigation.php
├─ orders.php
├─ paging.php
├─ place_order.php
├─ product.php
├─ products.php
├─ read_one_order.php
├─ remove_from_cart.php
├─ search.php
├─ update_quantity.php

5.0 What People Say?

Here's what people feel about our work and source code downloads.

6.0 Features List & Download

FEATURE ACCESS LEVEL SOURCE CODE
USER MANAGEMENT
Create user Admin YES
Read users Admin YES
Update user Admin YES
Delete user Admin YES
Search user Admin YES
Users list pagination Admin YES
Valid email format required Admin & Customer YES
Password must be uppercase letter, lowercase letter, number and special character Admin & Customer YES
Confirm password field Admin YES
Password validation as you type Admin YES
View customer order history Admin & Customer YES
Deleting first administrator account is not allowed Admin YES
User types: Admin and Customer Admin & Customer YES
Interface for admin Admin YES
Interface for customer Customer YES
Login page Admin & Customer YES
Log out Admin & Customer YES
Edit profile of currently logged in user Admin YES
Show name with icon of currently logged in user Admin & Customer YES
PRODUCT MANAGEMENT
Create product Admin YES
Read products Admin YES
Update product Admin YES
Delete product Admin YES
Search product Admin & Customer YES
Product lists with pagination Admin & Customer YES
View inactive products Admin YES
View products under a category Admin & Customer YES
Product list under a category with pagination Admin & Customer YES
Upload product images, you can select many images at once Admin YES
View product images with thumbnails Admin & Customer YES
Delete product image with X icon Admin YES
Upload product PDFs , you can select many PDF files at once Admin YES
List product PDF Admin YES
Delete product PDF Admin YES
View single product with related information Customer YES
View single product with add to cart button Customer YES
View single product with image slider Customer YES
View single product with SEO friendly URL (.htaccess file used) Customer YES
Rich text editor for product description when adding or editing product Admin YES
Quantity value must be more than 1 Customer YES
Sorting by fields Admin YES
View products under a product category Admin & Customer YES
Highlight selected category in navigation Admin & Customer YES
ORDER MANAGEMENT
Make an order Customer YES
Auto-generated unique transaction ID Customer YES
Add to cart button (for each item) with specified quantity Customer YES
Cart page with list of products added to cart Customer YES
Update quantity button for each item in cart page Customer YES
Auto-compute subtotal in cart page Customer YES
Auto-compute grand total in cart page Customer YES
Remove from cart button for each item in the cart Customer YES
Empty cart button to remove all items in the cart Customer YES
View order history of a customer Admin & Customer YES
View pending and completed order in separate tabs Admin YES
Checkout page Customer YES
Show billing information on check-out page Customer YES
Show payment information on checkout page Customer YES
Payment via cash on delivery Customer YES
Place order page - Thank you message Customer YES
View list of orders Customer YES
Pagination on list of orders Admin & Customer YES
Latest order seen at the top of the list Admin & Customer YES
View details of an order Admin & Customer YES
Auto-compute order totals Admin & Customer YES
Change status of an order (pending or completed) Admin YES
SECURITY
Register user hashed password stored in the database Customer YES
Edit user profile hashed password update in the database Admin YES
Create user hashed password stored in the database Admin YES
Login user with hashed password validation Customer & Admin YES
Used PDO bindParam() to prevent SQL injection in all MySQL queries Developer YES
Used PHP htmlspecialchars() & strip_tags() to prevent XSS attacks Developer YES
MORE REASONS TO DOWNLOAD IT
Object oriented programming source code Developer YES
Bootstrap user interface Developer YES
PDO extension used Developer YES
Page title navigation with links Developer YES
Radio button looks like a switch Developer YES
Icon in all create, edit and delete buttons Developer YES
All source code files organized by folders Developer YES
Database configuration file in config folder Developer YES
SQL file and READ-ME.txt in "dev" folder Developer YES
Database design and data dictionary in "dev" folder Developer YES
Well explained / commented source code Developer YES
Free support for 6 months Developer YES
Free source code updates. Developer YES
Buy once, use for unlimited number of sites Developer YES
One-time payment, no recurring payment Developer YES

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

7.0 Simple Set Up

Source code simple set up when you install:

1. Extract the ZIP file to your server directory.

2. In your PhpMyAdmin, create a database "shop_cart_module"

3. Import the "shop_cart_module.sql" SQL file in the "dev" folder

4. Change rewrite base directory in line 7 of .htaccess file (if needed)

5. Change $home_url in /config/core.php (if needed)

6. Configure database in /config/database.php

7. Run product.php - this is the main file, not index.php

8. User Login
Admin Section Login
Username: mike@example.com
Password: ninja12qw!@QW

Customer Account Login
Username: darwin@example.com
Password: darwin12qw!@QW

How To Make TinyMCE File Manager / File Browser Work?

1. Change line 71 of /libs/js/responsive_filemanager/filemanager/config/config.php

'upload_dir' => '/YOUR_ROOT_DIRECTORY/libs/js/responsive_filemanager/source/',

2. Change line 42-43 of /admin/layout_foot.php

external_filemanager_path:"/YOUR_ROOT_DIRECTORY/libs/js/responsive_filemanager/filemanager/",
external_plugins: { "filemanager" : "/YOUR_ROOT_DIRECTORY/libs/js/responsive_filemanager/filemanager/plugin.min.js"},

I'll keep you updated via email with the update information and download link. Download the source code by clicking the green button below. Once your payment was sent, you'll receive the download link on your email.

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

8.0 Need More Features?

If you think you now need more features, you can try our "PHP Shopping Cart System" - it has highly related and useful features for your PHP shopping cart project.

Below are some screenshots of the system's output. You can click an image to view the larger version of it. Use the left and right arrow to navigate through the screenshots.

Please note that the following images are just output previews. New features might be added already the time you are reading this.

Output preview when customer is not logged in.


Output preview when customer is logged in.


Output preview when admin / merchant is logged in.


To learn more and to download our PHP Shopping Cart System, Click Here.

10.0 Get In Touch

Contact me if you have any questions about the code, I'll be more than happy to help and support you!

My email is mike@codeofaninja.com, you can also contact me via our official Facebook page.

Please subscribe as well to receive news and updates about our source codes and free tutorials. Fill out the form below.

  • 1. You learned a lot from our valuable web programming tutorials.
  • 2. You will learn more because we constantly update each tutorial.
  • 3. You will get FREE email updates once a week, if you subscribe.
100% Privacy. We will never spam you!

Thank you visiting our for PHP Online Shopping Cart Source code download page!