Posts

Create a Basic Marketplace Web Application using PHP MySQL

Image
Create a web application using HTML/CSS, Bootstrap, PHP, MySQL etc. that shall be a basic marketplace where sellers create account to list products to sell and buyers create account to review products and add them to their shopping cart. Here is the ERD of marketplace (lets call it primestore)
Click Here to download SQL Script file.
Different pages you need to create to complete this marketplace are explained below.
index.php i.e homepage. It shall contain list of categories (on left side) and recently added 16 products (4 products in each row) with pagination. Show each product title, price, main picture and shop name. When shop name is clicked, open same page i.e index.php to show all products of that shop (hint: Pass seller ID to index.php page as request parameter). When seller ID is received in page, display heading i.e. "All Products Listed by <Shop Title>" for the list of products. When user click a category at index.php, open same page passing category ID to lis…

Task 4a - Position, Box-Sizing and Opacity CSS Properties

Image
There are two very useful properties in CSS i.e. position and box-sizing. You must have good understanding how both of these work. Below I have explained two tasks that should help you to understand them.
Position and OpacityBefore doing this task, I suggest you read basics of different values of position e.g. static, relative, fixed, and absolute. Then do the below task to see how position of one element can effect others.

Using position property you can change the default position of an element on HTML page. From below screen you can see, the element with text is placed at top of image. A container div contains img and text (in span element). The text has property postion:absolute & bottom:0px and the container div has the property postion:relative. Below is how it looks like.


You can clearly see, the text element is placed at top of the image. If we change the text span to div and apply width property, it shall look like this:


Though the text div is placed on image but its not cl…

Blogger Theme / Template Tutorial

I'm exploring Blogger theme structure to customize it. I want to write learning notes along the way. So, this post is work-in-progress, so don't consider it complete.

To understand this tutorial, you shall know Blogger basic usage e.g. adding new posts in Blogger blog, creating new pages, assigning labels, etc. and you shall have basic knowledge of HTML, CSS and programming e.g. variables, if/else, loops etc. My objective is to explain basic concepts and building blocks of blogger theme, I do not intend to build a professional looking theme.

There are following points, you must understand to work on Blogger templates:
Basic ConceptsStyle VariablesData TagsWidget TagsStructure of ThemeBasic Blogger Template ConceptsIts important to understand different types of web pages that blogger offer. Understanding page type is important as in custom theme you need to embed different contents based on the type of page e.g. images slider at home page only, specific background image at top of …

How to Setup SSL Certificate in Tomcat 8 - Received from SSLS.COM

Configuring SSL certificate in Tomcat first time may take lot of time. SSL certificate setup in Tomcat is not straight forward for two reasons:

There are different type of SSL certificate files and follow different encodings, depending on the certificate providerThere are may differences in configuration steps in different versions of Tomcat I recently configured SSL certificate for one of my website, the certificate was pruchased from SSLS.com for obvious reasons i.e. their rates are very good. 
How to get SSL Certificate from SSLs.com
Purchased SSL certificate from www.ssls.comTo generate and download SSL certificate, we need to provide CSR (Certificate Signing Request) in SSLs.com account. Enter your website details at https://www.digicert.com/easy-csr/openssl.htm, it would generate the command. Enter that command in Linux CLI, it would generate the CSR file and KEY file (its your private key so must be kep confidential). We would later use this file when configuring cert in Tomcat. …

How to Send Email using Mailgun PHP API

1. Create an account at Mailgun.com, you would get API Key and a sandbox domain for testing. You shall later add your custom domain too.


2. Create a sample project folder and install Composer. mailguntest is out project name, you can change as per your requirement.
>mkdir mailguntest
>cd mailguntest
>curl -sS https://getcomposer.org/installer | php

Once Composer is installed, add Mailgun PHP API / library too.
>php composer.phar require mailgun/mailgun-php:~1.7.1

I have used version 1.7.1, you can use any. see https://packagist.org/packages/mailgun/mailgun-php for details.


3. In mailguntest folder, create mailer.php file with below contents:
Update the code as per your mailgun code settings:

<?php
require 'vendor/autoload.php';
use Mailgun\Mailgun;
$mg = new Mailgun("write your API key here");
$domain = "write-your-sandbox-domain for testing";

$mg->sendMessage($domain, array(
'from' => 'postmaster@write-your-sandbox-dom…

adsys schema

CREATE TABLE `ads` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) DEFAULT NULL, `price` float DEFAULT NULL, `category_id` mediumint(9) DEFAULT NULL, `mobile_no` varchar(255) DEFAULT NULL, `condition` varchar(255) DEFAULT NULL, `picture_file_name` varchar(45) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `categories` ( `id` mediumint(9) NOT NULL AUTO_INCREMENT, `name` varchar(45) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Make Single Page Web Application using JavaScript and AJAX - Practice Task

Image
JavaScript
Above is User Interface of how your application shall look alike. Make a web page using HTML/CSS (you may use Bootstrap) and JavaScript. When user fill the form and press 'add' button, the record shall be added in the table given at left side. Action column contains Update and Remove links, "Update" shall load the record in form, shown at right. When user update the values and press 'update' button, it shall update the corresponding row in the left table. Initially, when the page is loaded, the table shall be empty and "Update" button shall be disabled. When user click the "Update" link in a row, "add" button shall be disabled. "Reset" button shall reinitialize the form at the same state when the page was loaded, to add new records. You are supposed to code above listed features using JavaScript (without refreshing the page).

AJAX
At top of above created page, add a checkbox labeled "Sync with Database&q…