Author: admin

JSP User Management System

by

May 25, 2021

11:14 am

Leave a comment on JSP User Management System

Projects

Create a project user management system

Roles: Admin

With correct credentials admin should be able to login and see the dashboard.

if credentials are wrong he will stay on login page and show a message – wrong credentials.

On successful login admin can see users list perform all CRUDL operations.

Following are the wireframes for reference.


login.jsp
dashboard.jsp
add_user.jsp
edit_user.jsp
delete confirm box

Deploy war on heroku

Signup and select java as primary language https://signup.heroku.com/

Download heroku cli from https://devcenter.heroku.com/articles/heroku-cli

heroku plugins:install java
heroku login

Open another terminal or gitbash and run following command

heroku war:deploy <path_to_war_file> --app <app_name>

Reference Code: https://gitlab.com/tcet/advanced-java

Reference YouTube videos

  1. Introduction to Servlet
  2. MySQL DATABASE CRUDL
  3. Servlet Methods – GET, POST, PUT, DELETE and OPTIONS
  4. DATABASE CONNECTION JDBC MySQL
  5. Show MySQL Data in HTML Table
  6. Session Management – Login / Logout
  7. DML – Insert Update Delete
  8. Bootstrap Integration in JSP

Java Cheat Sheet

by

May 23, 2021

5:46 am

Leave a comment on Java Cheat Sheet

Java

Softwares to Install

JDK 11
https://www.oracle.com/in/java/technologies/javase-jdk11-downloads.html

Apache Tomcat Server (version 9)
https://tomcat.apache.org/download-90.cgi

Eclipse EE (2021)
https://www.eclipse.org/downloads/packages/release/neon/3/eclipse-ide-java-ee-developers

Xampp for MySQL (latest version)
https://www.apachefriends.org/download.html

Postman for REST API
https://www.postman.com/downloads/

Addition of Two Numbers

class Main {
	
	public static void main(String args[]) {
		System.out.println(args[0]);
		System.out.println(args[1]);
		
		int num1 = Integer.parseInt(args[0]);
		int num2 = Integer.parseInt(args[1]);

		int add = num1 + num2;
		
		System.out.println(String.format("%s + %s = %s", num1, num2, add));
	}
	
}

Inheritance

class Bank {
	
	protected int balance;
	
	public Bank(int bal) {
		this.balance = bal;
		System.out.println(String.format("Account opened with Balance: %s", this.balance));
	}
	
	public void deposit(int amt) {
		System.out.println(String.format("Deposit Amount: %s", amt));
		this.balance += amt;
	}
	
	public void withdraw(int amt) {
		System.out.println(String.format("Withdraw Amount: %s", amt));
		this.balance -= amt;
	}
	
	public void showBalance() {
		System.out.println(String.format("Available Balance: %s", this.balance));
	}
	
}

class HDFC extends Bank {
	public HDFC(int bal) {
		super(bal);
	}
}

class SBI extends Bank {
	public SBI(int bal) {
		super(bal);
	}
	
	public void withdraw(int amt) {
		super.withdraw(amt);
		super.balance -= 20;
	}
	
}

class Main {
	public static void main(String args[]) {
		Bank bobj = new Bank(1000);
		bobj.showBalance();
		bobj.deposit(500);
		bobj.showBalance();
		bobj.withdraw(300);
		bobj.showBalance();
		
		System.out.println("====================");
		
		HDFC hobj = new HDFC(2000);
		hobj.showBalance();
		hobj.deposit(500);
		hobj.showBalance();
		hobj.withdraw(300);
		hobj.showBalance();
		
		System.out.println("====================");
		
		SBI sobj = new SBI(3000);
		sobj.showBalance();
		sobj.deposit(500);
		sobj.showBalance();
		sobj.withdraw(300);
		sobj.showBalance();
	}
}

Exception Handling

class Main {
	public static void main(String args[]) {
		try {
			
			int num1 = Integer.parseInt(args[0]);
			int num2 = Integer.parseInt(args[1]);
			
			try {
				int div = num1 / num2;
				System.out.println(String.format("Division of %s and %s is %s", num1, num2, div));
			} catch (Exception e) {
				System.out.println(e);
			}
			
			
		} catch (ArrayIndexOutOfBoundsException aie) {
			System.out.println(aie);
			
		} catch (Exception e) {
			System.out.println(e);
		}
		
	}
}

Servlet Demo

Servlet Life Cycle

  1. form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Addition of 2 numbers</title>
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
	crossorigin="anonymous">
</head>
<body class="container">
	<form action="CalcServlet" class="m-5">
		<div class="row">
			<div class="col">Number 1</div>
			<div class="col">
				<input type="text" name="num1" placeholder="Enter number" autofocus>
			</div>
		</div>
		<div class="row">
			<div class="col">Number 1</div>
			<div class="col">
				<input type="text" name="num2" placeholder="Enter number">
			</div>
		</div>
		<div class="row">
			<div class="col">
				<input class="btn btn-primary" type="submit" value="Calculate" />
			</div>
		</div>
	</form>
</body>
</html>

2. CalcServlet

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AddServlet
 */
@WebServlet("/CalcServlet")
public class CalcServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CalcServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		response.getWriter().write(String.format("%s + %s = %s", num1, num2, num1+num2));
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//doGet(request, response);
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		response.getWriter().write(String.format("%s * %s = %s", num1, num2, num1*num2));
	}
	
	protected void doPut(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//doGet(request, response);
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		response.getWriter().write(String.format("%s - %s = %s", num1, num2, num1-num2));
	}

	protected void doDelete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//doGet(request, response);
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		response.getWriter().write(String.format("%s / %s = %s", num1, num2, num1/num2));
	}

	protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//doGet(request, response);
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		response.getWriter().write(String.format("%s %% %s = %s", num1, num2, num1%num2));
	}

}

DATABASE SQL

CREATE DATABASE

CREATE DATABASE company;

CREATE TABLE

CREATE TABLE users(
    id INT,
    NAME VARCHAR(100) NOT NULL,
    age TINYINT NOT NULL,
    city VARCHAR(200) NOT NULL
);

ALTER TABLE

ALTER TABLE
    users MODIFY id INT PRIMARY KEY AUTO_INCREMENT;

MySQL JDBC

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class CRUDLDemo {
	public static void main(String args[]) {
		String conn_str = "jdbc:mysql://localhost:3306/company";
		String dbusername = "root";
		String dbpassword = "";

		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection conn = DriverManager.getConnection(conn_str, dbusername, dbpassword);

			String select_sql = "SELECT * FROM users";
			Statement stmt = conn.createStatement();

			ResultSet rs = stmt.executeQuery(select_sql);

			while (rs.next()) {
				System.out.println(rs.getInt("id"));
				System.out.println(rs.getString("name"));
				System.out.println(rs.getInt("age"));
				System.out.println(rs.getString("city"));
			}

//			String insert_sql = "INSERT INTO users VALUES (NULL, 'Priyanka', 30, 'Mumbai', NOW(), NOW())";
//			Statement stmt = conn.createStatement();
//			int result = stmt.executeUpdate(insert_sql);
//			System.out.println(result);

//			String delete_sql = "DELETE FROM users WHERE id = 3";
//			Statement stmt = conn.createStatement();
//			int result = stmt.executeUpdate(delete_sql);
//			System.out.println(result);

//			String update_sql = "UPDATE users SET city = 'Panvel' WHERE id = 2";
//			Statement stmt = conn.createStatement();
//			int result = stmt.executeUpdate(update_sql);
//			System.out.println(result);

		} catch (Exception e) {
			e.printStackTrace();
		}

	}

}

select.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<% 

String conn_string = "jdbc:mysql://localhost:3306/company";
String db_username = "root";
String db_password = "";

Connection conn = null;

try{
	Class.forName("com.mysql.cj.jdbc.Driver");
	conn = DriverManager.getConnection(conn_string, db_username, db_password);
} catch(Exception e) {
	out.println(e);
}

String select_sql = "SELECT * FROM users";
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(select_sql);

while(rs.next()) {
	out.println(String.format("Id: %s | Name: %s | Age: %s | City: %s<br>", rs.getInt("id"), rs.getString("name"), rs.getInt("age"), rs.getString("city")));
}

%>

insert.jsp

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%
String conn_string = "jdbc:mysql://localhost:3306/company";
String db_username = "root";
String db_password = "";

Connection conn = null;

try{
	Class.forName("com.mysql.cj.jdbc.Driver");
	conn = DriverManager.getConnection(conn_string, db_username, db_password);
} catch(Exception e) {
	out.println(e);
}

String insert_sql = "INSERT INTO users VALUES (NULL, 'Priyanka', 30, 'Mumbai', NOW(), NOW())";
Statement stmt = conn.createStatement();
int result = stmt.executeUpdate(insert_sql);

if(result == 1) {
	out.println("Record inserted successfully...");
} else {
	out.println("Something went wrong...");
}
%>

update.jsp

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%
String conn_string = "jdbc:mysql://localhost:3306/company";
String db_username = "root";
String db_password = "";

Connection conn = null;

try{
	Class.forName("com.mysql.cj.jdbc.Driver");
	conn = DriverManager.getConnection(conn_string, db_username, db_password);
} catch(Exception e) {
	out.println(e);
}

String update_sql = "UPDATE users SET name = 'Palkar' WHERE id = 4";
Statement stmt = conn.createStatement();
int result = stmt.executeUpdate(update_sql);

if(result == 1) {
	out.println("Record updated successfully...");
} else {
	out.println("Something went wrong...");
}
%>

delete.jsp

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%
String conn_string = "jdbc:mysql://localhost:3306/company";
String db_username = "root";
String db_password = "";

Connection conn = null;

try{
	Class.forName("com.mysql.cj.jdbc.Driver");
	conn = DriverManager.getConnection(conn_string, db_username, db_password);
} catch(Exception e) {
	out.println(e);
}

String delete_sql = "DELETE FROM users WHERE id = 4";
Statement stmt = conn.createStatement();
int result = stmt.executeUpdate(delete_sql);

if(result == 1) {
	out.println("Record deleted successfully...");
} else {
	out.println("Something went wrong...");
}
%>

functions.jsp

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>

<%!
public Connection getConnection() {

		String conn_string = "jdbc:mysql://localhost:3306/company";
		String db_username = "root";
		String db_password = "";

		Connection conn = null;

		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			conn = DriverManager.getConnection(conn_string, db_username, db_password);
		} catch (Exception e) {
			System.out.println(e);
		}

		return conn;
}

public void authorize(HttpSession session, HttpServletResponse response) {
	
	if(session.getAttribute("username") == null) {
		try {				
			response.sendRedirect("login_form.jsp?msg=Please login to access this page");
			
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
}

%>

include functions and header

<%@include file="functions.jsp" %>
<jsp:include page="header.jsp" />

Mini Car Inventory System

by

May 20, 2021

8:40 am

Leave a comment on Mini Car Inventory System

Projects

Creating a personal mini car inventory system from scratch using your best knowledge and skills. The system will have inventory of manufacturer and models (cars) of each manufacturer owned.

System should be created using your own frontend and backend framework and should use caching.

Frontend should be a webapp a.k.a. SPA. (Ie: no refreshing/reloading pages)

Technology to be used:

PHP (OOP)
MySql (Normalized Database Schema)
Javascript (JQuery – AJAX)
HTML, CSS and Bootstrap 5

Classes to be created:

Database – Class to deal with each and every operation of database.
Manufacturer – Class to deal with all operations related to car manufacturer.
Model – Class to deal with all operations related to car model.

Page 1: Add Manufacturer.
The page should contain a input box for manufacturer name and a submit button.

Page 2: Add Model.
This page should have a manufacturer dropdown on the right side and model name textbox on the left side (Both should be in the same line)

Add other details below about the car like “Color, manufacturing year, registration number, note and 2 pictures”. Pictures should be uploaded using any ajax plugin.

And lastly there should be a submit button.

Page 3: View Inventory.
This page should populate a table of all the models and manufacturers from the DB.

It should have the columns as below

Serial Number, Manufacturer Name, Model Name, Count

eg.

  1. Maruti WagonR 2
  2. Tata Nano 1

On clicking on the row, a popup will appear which will have details of the individual models like color, manufacturing year etc. (Basically all details from page 2) and a Sold clickable link.

On clicking Sold, the row will be deleted and the DB will be updated accordingly.

In addition to this, on Page 3 when users are viewing the inventory and in case a car is sold, the View Inventory table for the column Count will have to be dynamically updated in case a car is sold at that moment.

Similarly in case the users are on any other page or pop up of the system, they should get an alert saying “make model is sold” when a car is sold.

Wireframes

DATABASE Schema

Code for reference
https://github.com/shaileshsonare/mcis

Docker Cheat Sheet

by

May 19, 2021

7:23 pm

Leave a comment on Docker Cheat Sheet

DevOps

docker --version
docker version

Dockerfile

FROM php:7-apache
COPY . /var/www/html
WORKDIR /var/www/html
#CMD php index.php
EXPOSE 80
docker build -t helloworldphp7 .

To run docker image

docker run -p 8080:80 -v /c/xampp/htdocs/dockerdemo:/var/www/html -d php:8-apache

OR

docker run -p 8080:80 --name docker-apache -v /c/xampp/htdocs/dockerdemo:/var/www/html:ro -d php:8-apache

OR

docker run -d -p 8080:8080 --name jsp-project -v /root/jsp/:/usr/local/tomcat/webapps/test tomcat:9.0.1-jre8-alpine

To run docker image in interactive mode

docker container run -it <docker-image> /bin/bash

To List all images

docker images
docker images -q

To List all container

docker ps
docker ps -a
docker ps -aq

To remove image

docker rmi imagename

OR

docker rmi $(docker images -aq)

To remove container

docker rm <container-name>

OR

docker rm $(docker ps -aq)

OR

docker rm -f $(docker ps -aq)

To stop container

docker stop <container-name>

OR

docker stop $(docker ps -aq)

To push local image on docker hub

First create repository in dockerhub like we used to create in gitlab/github

docker login
docker tag firstimage YOUR_DOCKERHUB_NAME/firstimage
docker images
docker push YOUR_DOCKERHUB_NAME/firstimage

Working with MySQL

docker pull mysql/mysql-server:latest

docker images
docker create -v /var/lib/mysql --name mysqldata mysql/mysql-server:latest
docker ps -a
docker run -p 3307:3307 -d -e MYSQL_ROOT_PASSWORD=root --volumes-from mysqldata --name=mysqldb1 mysql/mysql-server:latest
docker ps
docker exec -it mysqldb1 bash
mysql -uroot -p

Install Jenkins on Ubuntu

by

April 13, 2021

6:14 am

Leave a comment on Install Jenkins on Ubuntu

DevOps, Linux

sudo apt update
sudo apt install default-jdk default-jre
javac
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c "echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list"
sudo apt update
sudo apt install jenkins
sudo service jenkins start
sudo service jenkins status

Open Browser and hit following url

http://localhost:8080/

To view default initial password

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

Install recommended Plugins. Make sure Git Plugin is installed

Username: admin
Password: Shift + 5
Full name: Administrator

Jenkins URL: http://localhost:8080/
Or
http://youripaddress:8080/
Or
http://yourdomain:8080/

Create New Item (New project for build)

Create release_project.sh file

rsync -av --exclude-from='.releaseignore' <src_dir_path> <dest_dir_path>

Add files and directories entries in .releaseignore file to skip rsync

node_modules
.git
private_documents

After creating freestyle project if you face any permission issue then try one of the following solutions

sudo su -
vim /etc/sudoers

Add following entry at end of file

#add jenkins as sudoer
jenkins        ALL=(ALL)       NOPASSWD: ALL

OR add user to the group

sudo usermod -a -G sudo jenkins

Ref:
medium.com
stackoverflow

vim cheat sheet

by

April 8, 2021

9:46 am

Leave a comment on vim cheat sheet

Linux

to open file

vim filename

copy/cut paste

yy => p
dd => p
v => select lines to copy => y => goto line where need to paste => p
v => select lines to cut => d => goto line where need to paste => p

to undo and redo

Esc
u u u u 

Esc
Ctrl + R Ctrl + R

to open file in read mode

vim -R filename

to open file on specific line number

vim filename +10

insert mode

i
o

escape / command mode

Esc

to write file

:w
:wq
:x

to minimize vim editor

Ctrl + Z

to see minimized files in vim

jobs

to see background job

bg

to open specific jobs or bring it to foreground

fg 1
fg +
fg -

search any word in vim editor

/word
/word\c
/word\C
#then press N or Shift + N

search and replace word

:%s/word/replacewith/i
:%s/word/replacewith/g

go to specific line

:10
:1
:$

show/hide line numbers in vim editor

:set number
:set nonumber

set tabstop

:set tabstop=4

set font color

:colorscheme murphy

vimdiff difference between 2 files

vimdiff file1 file2
#difference put
dp
#difference obtain
do

SQL Cheat Sheet

by

April 7, 2021

5:48 pm

Leave a comment on SQL Cheat Sheet

Database

,

login to database

mysql -u username -p'password' database_name

logout from database

Ctrl + D

list all database

SHOW DATABASES;

Create Database

CREATE DATABASE company;

enter database

USE database_name;

show current database (dual is dummy/virtual database provided by oracle) 

SELECT DATABASE() FROM dual;

list all tables

SHOW TABLES;

list table pattern

SHOW TABLES LIKE '%table_substring%';

Create table

CREATE TABLE users(
    id INT,
    NAME VARCHAR(100) NOT NULL,
    age TINYINT NOT NULL,
    city VARCHAR(200) NOT NULL
);

Alter table

ALTER TABLE
    users MODIFY id INT PRIMARY KEY AUTO_INCREMENT;
ALTER TABLE
    users ADD added_at DATETIME AFTER `city`,
    ADD updated_at DATETIME AFTER added_at;

show schema

DESC <table_name>;
SHOW CREATE TABLE <table_name>\G;

show running sql processes

SHOW FULL PROCESSLIST;

import database/table (RUN IN BASH TERMINAL)
NOTE: Make sure your database is present in mysql server if not create new one

mysql -u root -p'password' database_name < backup_file.sql

export database (all tables) (RUN IN BASH TERMINAL)

mysqldump -u root -p'password' database_name > backup_file.sql

export specific tables (RUN IN BASH TERMINAL)

mysqldump -u root -p'password' database_name tbl1 tbl2 tbl3 > backup_file.sql

export only schema without data

mysqldump -u root -p'password' database_name --no-data

run sql command in terminal

mysql -u root -p'password' -e "SELECT COUNT(*) FROM database_name.table_name"

copy table

CREATE TABLE copy_of_table AS SELECT * FROM existing_table_name;

copy only table structure

CREATE TABLE copy_of_table AS SELECT * FROM existing_table_name WHERE 1 > 2;

Create new database user

CREATE USER 'user'@'hostname' IDENTIFIED BY 'PassWord';

To give remote access 

GRANT ALL ON database_name.* to 'database_username'@'10.24.96.%' IDENTIFIED BY 'database_password';

CRUD SQL

SELECT * FROM users ORDER BY id DESC;

DELETE FROM users WHERE id = 3;

INSERT INTO users (id, name, age, city, added_at, updated_at) VALUES (NULL, 'sonam gupta', 18, 'gorakhpur', NOW(), NOW());

UPDATE users SET name = 'Sonam Gupta', age = 20, city = 'Gorakhpur', updated_at = NOW() WHERE id = 5;

Ref Links:

Git Ftp

by

March 26, 2021

5:20 pm

1 Comment on Git Ftp

DevOps

,

NOTE: Run all commands from your projects root directory

#onetime
sudo apt-get install git-ftp

#onetime NOTE: PLEASE CHANGE WITH YOUR FTP SERVER URL
git config git-ftp.url "ftpupload.net"

#onetime NOTE: PLEASE CHANGE WITH YOUR FTP USERNAME
git config git-ftp.user "ftp-username"

#onetime NOTE: PLEASE CHANGE WITH YOUR FTP PASSWORD
git config git-ftp.password "ftp-password"

#onetime
git config git-ftp.syncroot .

#onetime
git ftp init --remote-root htdocs

git ftp push --remote-root htdocs

if you want to ignore files then create .git-ftp-ignore and add entries in this file

Ref:

https://www.codegrepper.com/code-examples/shell/git+ftp+empty+string+is+not+a+valid+pathspec.+please+use+.+instead+if+you+meant+to+match+all+paths

https://www.zyxware.com/articles/4192/how-to-deploy-files-from-a-git-repository-via-ftp

https://github.com/git-ftp/git-ftp

https://zoomadmin.com/HowToInstall/UbuntuPackage/git-ftp

https://github.com/git-ftp/git-ftp/blob/master/INSTALL.md#debian-ubuntu-and-others-using-apt

https://git-ftp.github.io/

https://github.com/git-ftp/git-ftp/blob/master/man/git-ftp.1.md

Install LEMP on WSL

by

March 22, 2021

6:19 pm

Leave a comment on Install LEMP on WSL

Windows

, ,

To install Ubuntu Linux on windows follow instructions from following site

https://ubuntu.com/wsl

Open PowerShell as Administrator

wsl --list --verbose

If you see error then run following command

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Now enable WSL from Windows Features

Restart PC

Restart-Computer

Install Ubuntu from Microsoft Store

Once you install it will show launch option

Click on Launch or search Ubuntu on windows search

You will be prompted to add new user which will be default user of Ubuntu

Once successfully installed you can open powershell and check installed WSL on your system

To update wsl from version 1 to version 2 (Optional)
You need to run following command

wsl --set-default-version 2

If you get issue you can upgrade kernal component by download and installing update msi

https://docs.microsoft.com/en-us/windows/wsl/install-win10#step-4—download-the-linux-kernel-update-package

Once you update wsl kernal
Run following command again

Now update Ubuntu from version 1 to 2

If you get error do enable to Virtual Machine Platform from Windows Features

Now Restart PC

Restart-Computer

If you still get the error then do enable virtualization from BIOS setting

Ubuntu path on windows explorer

\\wsl$\Ubuntu

Update and Upgrade Kernal

sudo apt-get update
sudo apt-get upgrade

Install Nginx Web Server

sudo add-apt-repository ppa:nginx/stable
sudo apt-get update
sudo apt-get install -y nginx
sudo service nginx start
sudo service nginx status
sudo service nginx status

Install PHP and its services

sudo add-apt-repository ppa:ondrej/php
sudo apt-cache show php
sudo apt-get install php7.4-cli php7.4-fpm php7.4-curl php7.4-gd php7.4-mysql php7.4-mbstring zip unzip
php --version
php -r "echo 'Hello World' . PHP_EOL;"
php -S localhost:1234
sudo service php7.4-fpm start
sudo vim /etc/php/7.4/fpm/pool.d/www.conf

Find

listen =  127.0.0.1:9000

Replace

listen= /run/php/php7.4-fpm.sock
sudo vim /etc/nginx/sites-available/default

Find

index index.html index.htm index.nginx-debian.html;

Replace

index index.php index.html index.htm index.nginx-debian.html;

Find

#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
# fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
#}

Replace

location ~ \.php$
{
include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
}

Restart Services

sudo service nginx reload
sudo service php7.4-fpm restart

Create index file in nginx’s default root directory

sudo touch /var/www/html/index.php
sudo vim /var/www/html/index.php

<?php
phpinfo();

Install MySQL server

sudo apt install mysql-server
sudo mysql_secure_installation

Create new user to access mysql from php/python or any other scripting language

if you face issue while connecting to database via php then run following commands by creating new user

CREATE USER 'phpuser'@'localhost' IDENTIFIED BY '%TGBbgt5';
GRANT ALL PRIVILEGES ON *.* TO 'phpuser'@'localhost';
FLUSH PRIVILEGES;

Ref: How to install Nginx + php + MySQL on WSL Windows 10 -H2S Media (how2shout.com)

PWA cheat sheet

by

February 4, 2021

7:02 pm

Leave a comment on PWA cheat sheet

Javascript

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="theme-color" content="#009578">
        <title>PWA</title>
        <link rel="stylesheet" href="src/master.css">
        <link rel="manifest" href="manifest.json">
        <link rel="apple-touch-icon" href="images/logo_2.jpg">
    </head>
    <body>
        <h3>Progressive Web App</h3>
        <script src="src/index.js"></script>
        <h4>Addition</h4>

    <label for="num1">Enter 1st Number:</label><br>
    <input type="text" id="num1" name="num1"><br>
    <br>

    <label for="num2">Enter 2nd Number:</label><br>
    <input type="text" id="num2" name="num2"><br><br>

    <button type="button" name="button" onclick="addition()">Add</button>

    <div>
        <h4>Result: <span id="res"> </span></h4>
    </div>

    <script>
        function addition() {
            var x = parseInt(document.getElementById("num1").value);
            var y = parseInt(document.getElementById("num2").value);

            var z = x + y;

            document.getElementById("res").innerHTML = z;
        }
    </script>

    </body>
</html>

manifest.json

{
    "name": "PWA demo",
    "short_name": "PWA",
    "start_url": ".",
    "background_color": "#6dcdb1",
    "theme_color": "#009578",
    "display": "standalone",
    "icons": [
        {
            "src": "images/logo_2.jpg",
            "sizes": "512x512",
            "type": "image/jpg"
        },
        {
            "src": "images/logo_1.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

sw.js

self.addEventListener("install", e => {
    // console.log("Install decode!");
    e.waitUntil(
        caches.open("static").then(cache => {
            return cache.addAll(["./", "./src/master.css", "./images/logo_2.jpg"]);
        })
    );
});


self.addEventListener("fetch", e => {
    // console.log(`Intercepting fetch request for: ${e.request.url}`);
    e.respondWith(
        caches.match(e.request).then(response => {
            return response || fetch(e.request);
        })
    );
});

src/index.js

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("sw.js").then(registration => {
        console.log("SW Registered!");
        console.log(registration);
    }).catch(error => {
        console.log("SW Registration failed!");
        console.log(error);
    })
}

src/master.css

body {
    background: #eeeeee;
}