Students put high energy in developing their academic final year projects, they look very inspired by the technology-stack and many of them ask about technology only. When you discuss, they claim to launch the product too. Young friends, products are not made like this. Let me share a few things that I have learned with time: Developing something to learn a technology only (Node.JS, Angular, .Net, Android, etc) and creating a real product for users are different things. If you want to create a product, your primary focus should be the market e.g. value creation, target customers and their pain points, user experience, understanding market need and gap, idea validation and testing, understanding business processes your product target, along with creating the actual product. Technology matters but not that much as craftmen think. Technology stack can be improved with time, no one really cares about the technology used as long as the product solve their problem. How many times yo...

Create a web application using HTML/CSS, Bootstrap, PHP, and MySQL, etc. It shall be a basic marketplace where any user interested to sell product shall create sellers account to list products to sell. Buyers create account to review products and add product in shopping cart. Here is the ERD of marketplace (lets call this project 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 at bottom. 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 cli...

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 Opacity Before 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...

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 Concepts Style Variables Data Tags Widget Tags Structure of Theme Basic Blogger Template Concepts Its 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 backgrou...

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 provider There 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.com To 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...

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-sa...

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;

First I would explain basics cookies in web applications and how they work. Then, I have listed the PHP code to create, read and remove cookies with brief description of each task. Its comprehensive post, so feel free to not read in one sitting, take breaks but absorb as you read. What are Cookies A cookie is data in the form of key value pair e.g.  city=Lahore, id=90,  that is stored in user's web browser. Cookies are created in web browser on the instuction of web server. Once some cookies are create/stored in web browser (we would shortly see how to create them), when user send new requests to same web application, existing cookies are automatically added in HTTP request by the web browser. So the data stored by web developer in user browsesr (in the form of cookies), automatically reaches back at server in subsequent requests. When web server send instruction to create a new cookie, it also send cookie expiry time to browser (or default time is used, explained later)...

How does session work in web applications , covers basic concepts of session management. If you are new to web sessions, you should read that post first. This article follows code centric approach i.e. it contains different code samples with brief description. It covers: how to create a session in PHP, how to put some data in session, how to get data from session, how to remove specific data element from session or all of the session data at once. Consider it a reference article of code samples of PHP Sessions. How to Create New Session in PHP The below PHP file i.e. create_session.php creates new session at web server when the page is accessed from browser. session_start() method is used to create a new session. When session is created, a unique session ID is generated, we can read the value of session ID by calling session_id() function. Server send the generated session ID to browser where it is stored as cookie, named PHPSESSID. When user send another request, browser ...

Create a simple e-commernce store to practice different concepts of web programming we discussed in class e.g. Bootstrap, form handling, files handling, sessions, cookies, database connectivity etc. E-commerce stores are used to sell products. The end product shall have Bootstrap based UI, so feel free to use a free Bootstrap theme. From functional perspective, your assignment shall look something like this:  https://demo.oscommerce.com  (UI shall be better) The store shall have at least following functionalities: Use bootstrap 4 for layout and different page components e.g. forms, panels, cards, etc. It shall allow users to register, login, logout, change password, and edit profile. Use any basic attributes. After admin is login, admin (user type) shall add new products and categories. Let admin to update and delete both entities. Category shall have only name and id. Products shall have title, description, price, in-stock, and category_id fields. Let admin to ...

Nature of Project for Web Technologies Course You would develop a web based system, application or proof of concept code samples (depending on nature of the semester project you choose). The project include, but not limited to, following types: Develop a Management Information System (MIS) e.g. accounts management system, fleet management, school management system, assets management system, application processing system, sale management systems, pathology management system, etc. If if you select such MIS, make sure it contains at least 12 to 15 tables and there are at least 8 usecases per group-member. The project may be a web or mobile product based on your unique business idea that would deliver some unique value to users if you launch it. In this case, there may be less number of use cases and database tables, but you have to justify its uniqueness in your proposal explaining market need, other competitive products and how your idea or product is unique or why user would use...

Before doing below listed tasks, understand what are cookies and how they work. Then understand my given code samples. Note that, below tasks are just to understand the cookies, it may not appear in real applications. Here are the tasks: 1. Make interval.php that saves a cookie in user internet browser with current time. When user access the page again, show the duration in seconds after which the page is opened. 2. Make a form with two input text fields. First for cookie name and other for cookie value, when user submit the form. Create new cookie with passed name and value.  3. Make a form with one input text field and Delete Cookie button, when user submit the form, delete only the cookies whose name is submitted by form. Must handle form using Postback mechanism. 4. Make show-all-cookies.php page, it should display all cookies the application has stored in user browser. (assume, you don't know the keys). 5. Create control-panel.php to manage, view a...

First you must review forms code samples we discussed in class to understand how to create forms with all input controls, receive submitted data at server side and how to generate update form. After getting basic understanding of forms, do below givens tasks. Without doing below tasks, do not expect to solve forms related question in quiz and sessional 2 exam. Task 7.1  Assume a form is submitted to handler.php script, write handler.php script such that it should display all parameter names and values in tabular format ie. two columns, key name in first column and value in second column. Show the method name used to submit the data. The handler should work, whether the form is submitted using GET or POST. Task 7.2 Do this task using postback approach. Make a form with option to attach up to 5 pictures. Write fileshandler.php script that shall save all submitted files in filestore directory (located in same folder where handler script is saved). Rename each file to ...

Explore making layouts with different components of Bootstrap. https://getbootstrap.com/docs/4.0/examples/ is good start to see and explore some examples. Make at least following: https://getbootstrap.com/docs/4.0/examples/blog/ https://getbootstrap.com/docs/4.0/examples/pricing/ https://getbootstrap.com/docs/4.0/examples/carousel/

Last Updated On: Mar. 9, 2024 Title : Create CNN Layout using CSS/HTML (do not use Bootstrap) Rename your file to <section name>--<student reg. number as per std id card>--<student-name>.html and upload the file. Define CSS as internal and for images, use images URLs. Create  cnn.com layout, overall look & feel should be same e.g. paddings, borders, colors, margins, font family, hover effects, font-size, section headings etc. of different widgets. You don't need to use all content and images to make as-is website, select a few news text and images as sample and feel free to use them in different sections, repeatedly. You must write all CSS and HTML by your own, do not copy CSS styles from CNN website. Take care of following points: Navigation bar and logo placement. Make all horizontal sections e.g. 3 columns of different widths, 3 columns of same width, 4 columns section (same and different width, both), "In Case You Missed It" section, foote...