DEV Community: Maryam Keshavarz

Amazon clone javascript bootstrap jquery handlebar Node.js MongoDB JWT step 1

Maryam Keshavarz — Wed, 30 Oct 2019 07:09:08 +0000

1- For quick start in gitbash into your selected folder type below command for making a basic express node.js project that use handlebars for UI:
express projectName --hbs
2- Open your project on VS code and with: yarn add command add all dependencyies and libraries to your project

3-now with: yarn start command your project should be run on http://localhost:3000/ address on the browser:

4- handlebar projects have a layout page that can show all pages in the body of main layout page:

{{{body}}}

Actually body renders all html codes from other .hbs files according to route files:

for example for homepage localhost:3000/ in routes folder on index.js file we have below code:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

5-For render output content from router in handlebar files we use:

{{variable-name}}

6-For using bootstrap library add bootstrap to layout.hbs for use bootstrap before your style.css in project
add these lines:

 {{!-- add bootstrap on header before stlye.css--}}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}
{{!-- add bootstrap after body--}}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
{{!-- add bootstrap --}}

7- for using jquery have to add jquery link on the bottom of body in layout page:

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

8-make partial folder on view folder for common part on all pages like header and footer and put header.hbs or footer.hbs files on it we can use bootstrap template for make them: https://getbootstrap.com/docs/4.3/components/alerts/

9-for add partial files to layout page should install express-handlebars with below command: yarn add hbs and add below code to app.js file to use it:

const hbs = require('hbs');
//under view engine setup part:
hbs.registerPartials(__dirname + '/views/partial');

I made a copy of bootstrab navbar and footer and changed them for my project and then wrote my navbar and footer code for your review:

{{!-- footer page --}}
<footer class="page-footer font-small mdb-color pt-4  bg-dark text-white">

    <div class="container text-center text-md-left">

        <div class="row text-center text-md-left mt-3 pb-3">
            <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Introduction: </h6>
                <p>This is Amazon clone project. Inspired by World The Biggest E-commerce site, Amazon.com. This is a
                    project for Geogria Tech Coding Camp Courework. The copyright of product images used in this
                    project is owned by Amazon.com</p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Members</h6>

                <p>
                    <a href="https://github.com/sandy8111112004">Ming Shiuan Tsai</a>
                </p>
                <p>
                    <a href="https://github.com/tnguyen303">Tri Nguyen</a>
                </p>
                <p>
                    <a href="https://github.com/kmaryam27">Maryam Keshavarz</a>
                </p>
                <p>
                    <a href="https://github.com/moz5691">Chan Ho Ahn</a>
                </p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold">Instuctors</h6>
                <p>
                    <a href="https://github.com/hannahpatellis">Hannah Patellis</a>
                </p>
                <p>
                    <a href="https://github.com/CjJordan">Cj Jordan</a>
                </p>
                <p>
                    <a href="https://github.com/asalmeron3">Arturo R Salmeron</a>
                </p>
            </div>

            <hr class="w-100 clearfix d-md-none">
            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
                <h6 class="text-uppercase mb-4 font-weight-bold"></h6>
                <p><i class="fa fa-home mr-3">Github </i></p> <a href="https://github.com/moz5691/amazon_clone">https://github.com/moz5691/amazon_clone</a>
                <hr>
                <p><i class="fa fa-at mr-3">Heroku</i></p>
                <a href="https://amazon--hubblepuff.herokuapp.com/">https://amazon--hubblepuff.herokuapp.com/
                </a>

            </div>

        </div>

        <hr>
        <div class="row d-flex align-items-center">
            <div class="col-md-7 col-lg-8">
                <p class="text-center text-md-left">© 2018 Copyright:
                    <strong>Ming Shiuan Tsai, Maryam Keshavarz, Tri Nguyen, Chan Ho Ahn</strong>
                    </a>
                </p>

            </div>
        </div>
</footer>

and for top navbar:

{{!-- navbar placing on top --}}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand pull-left" href="/"><img id="amazon-logo" src="/images/Amazon-icon.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <form class="form-inline my-2 my-lg-0 mr-auto" method="POST" action="/inventory/search" method="POST">
    <select class="form-control" id="departmentSelect" name="departmentSelect">
      <option value="All">All Departments</option>
      <option value="Book">Books</option>
      <option value="Music">Music</option>
      <option value="Food">Food</option>
      <option value="Toy">Toys</option>
      <option value="Sports">Sports</option>
      <option value="Electronics">Electronics</option>
      <option style="border-bottom: 1px solid black" value="Clothing">Clothing</option>
    </select>
    <input class="form-control" type="search" placeholder="Search" aria-label="Search" name="searchQuery" style="margin:0;">

    <button class="btn searchBtn" type="submit"><i class="fas fa-search"></i></button>
    {{!-- <button class=" mr-sm-2 btn btn-outline-success my-2 my-sm-0 searchBtn" type="submit"><i class="far fa-search"></i></button>
    --}}
  </form>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">

        <a class="nav-link" href="/inventory/1">Products</a>

      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Login
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

          <a class="dropdown-item" href="/login"> {{#unless reviewer}}Login{{/unless}}</a>
          <a class="dropdown-item" href="/inventories/{{reviewer}}">Seller Account</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </li>
      <li class="nav-item">
        {{#if reviewer}}
        <p class="text-light ml-4">Hello, {{reviewer}}</p>
        {{/if}}
      </li>
    </ul>

  </div>
</nav>

10- With below command on layout page we can add our navbar or header nad footer to main page:

 {{> navbar}} {{{body}}} {{> footer}}

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 6)

Maryam Keshavarz — Mon, 01 Apr 2019 21:37:21 +0000

In this article I try to solve bugs of part 5, upload it on Github and show the project on heroku.com.

Now we can style it and improve the project step by step by before all we try to deploy first version of project to the Github and Heroku. First: Go to Github.com and make an account for your project Github is a web-based hosting service for version control using Git. It is mostly used for computer code. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. Open client folder in terminal and with npm run build command make it ready to deploy: Open your GitHub account and go to repository tab and press new button to make a new repository for your project:

Type your Repository name and add Initialize this repository with a README whith checklist, then pess .gitignore button to ignore node-module folder to deploy, So download and upload project will be faster but remember after download project with (npm install) command in VSCode terminal should add node-module folder with all requirements of project. Type Node on textBox and press Create Repository button:

Now open an account on heroku website (Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud: www.heroku.com)

Then on your dashboard push new button to and then create new app button for setting up heroku new app

In the next step:

Now in the Deploy tab click on github button and on search place try to find your github repository

Then push connect button.
Now on the buttom of page click on (Enable automatic deploys) to automatcally deploys your app after change on github.
The next step is going to the resource tap and add mysql database on heroku app.
Remember to add jawsDB mysql free version:

Then with click on mysql go to another page to access heroku mysql username and password:

Now we have to copt the connection string and paste it inside of our project as a mySql database address, so below code on line 33-38 of app.js:

const connection = mysql.createConnection({
  host: 'localhost',
  user:'root',
  password:'myjs123',
  database:'simple-react-sql-db'
});

should change to host user password and database address of connection String.
Now test your application to make sure it is working.
we have to see this error because we have not user table on new database to map it now. So on your MySQL workbench go to home tab to add your heroku database on it and add your table on new database:

Now in localhost database with copy table and paste table statement on heroku app database we can have that table on heroku:

Now insert your data to database:

The last change is on the backend routes folder in html-routes.js file. we have to change database name to heroku app database:

Test again your application, it is working without any error.
Now we have to build the project ...

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 5)

Maryam Keshavarz — Sun, 25 Nov 2018 19:19:07 +0000

In this article I try to solve bugs of project, upload it on Github.

probably after running the project you will see nothing on the browser and with right click on browser and opening inspect section you will see below error in the console tab:

For Cors issue we have to add bellow code on the server (app.js) for backend before define connection code:

//CORS
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Then use npm install axios for backend and bower install axios for using axios to frontend commands in terminal to access axios and use it. Now open client folder and open app.js file again to change fetch code and use axios that will answer to our project

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  state = {
    users:[]
  }
  componentDidMount(){
    this.getUsers();
  }

  getUsers = _ => {
        axios.get('/users')
    .then((data) => {
      console.log(data.data.users);
      this.setState({users: data.data.users});
    })
    // .then(({response}) => this.setState({users: response.users}))
    .catch(error => console.log(error));
  }
  showUsers = user => <div key={user.id}>{user.username}</div>
  render() {//building react method that comes inse od react component
    const { users } = this.state;
    return (//jsx code and can return only a single parent tag
      <div className="App">
        {users.map(this.showUsers)}
      </div>
    );
  }
}

export default App;

Congratulation your first project deployed:

With pushing clone or download button on the Repo and press copy button we can access link of address of repository:

Open Git Bash go to specific address that you want to have copy of github repo. now command: git clone CTL+v(pasting address of Github repository)

In this part copy all of your project and past them to the folder of repo:

At the end with below commands should upload codes to the Github.

At the end we have an issue on deploy client folder:

In next part we will try to solve client folder issue and deploy the project on Heroku website and develop more this project

resources:

https://en.wikipedia.org/wiki/GitHub
https://www.youtube.com/watch?v=7yA7BGos2KQ
https://github.com/gitname/react-gh-pages

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 4)

Maryam Keshavarz — Wed, 14 Nov 2018 21:48:49 +0000

In this article I describe developing simple front end with use react library to show our back end data in browser

For start work with react library can use create-react-app tool that built by developers at Facebook to help you build React applications. For more information visit: https://github.com/facebook/create-react-app

1- Open GitBash and make a new folder and run this command: npm install -g express-generator on it:

with command: express nameOfBackEndFolder make a back end folder by default for the project and with npm install command, install all modules that you need:

2- For create react for fron end go to backend folder and run npm install -g create-react-app and after installation run: create-react-app client
3- Open project ot VSCode then open package.json file of client folder and add proxy key to it:

4- In app.js at the backend folder that is like server.js in the backend that you made add these code :
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
user:'root',
password:'myjs123',//password of your mysql db
database:'simple-react-sql-db'
});

connection.connect(function(err){
(err)? console.log(err+'+++++++++++++++//////////'): console.log('connection********');
});

require('./routes/html-routes')(app, connection);

5- Open app.js in terminal and run npm install mysql to add MySQL data base to the new project
6- change html-routes.js file to your html-route.js that wrote on your backend

7- In client folder on app.js file remove tag:

8- Before render method write these codes:
state = {
users:[]
}
componentDidMount(){
this.getUsers();

}

getUsers = _ => {
fetch('http://localhost:3001')
.then(response => console.log(response))//response.json())
.then(({response}) => this.setState({users: 'response.users'}))
.catch(error => console.log(error));
}
showUsers = user =>

{user.username}

(In next article will explain about these codes conception) 9- Then change render function to: render() {//building react method that comes inse od react component const { users } = this.state; return (//jsx code and can return only a single parent tag {users.map(this.showUsers)} ); }

10- run MySQL command line client add your password and enter to start Mysql
11- In bin folder open www file and change port 3000 to 3001:

12- At the end of this step you have to open app.js of backend folder into the terminal of VSCode and run npm start command to run server on port: 3001:

13- Now open gitbash and go to client app.js route and then command: npm star to run react:

now you have to see your backend in port 3001 and fronend in port 3000 but probably you won't see any thing in front end page because of 'Cors' exception I will continue to solve it at the next article.

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 3)

Maryam Keshavarz — Mon, 05 Nov 2018 05:27:51 +0000

In this article I describe developing simple back end for access to database and show table's information with javaScript language

After installing nodeJs from: https://nodejs.org/en/download/ and visual studio code from: https://code.visualstudio.com/download and GitBash from: https://git-scm.com/downloads we can start developing backend of project but before start we need a little knowledge about nodeJS.

* What exactly is Node.js?

Node.js is a JavaScript runtime environment. It is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

* What is Git Bash?

Git bash is a msys shell included in "Git for Windows", and is a slimmed-down version of Cygwin (an old version at that), whose only purpose is to provide enough of a POSIX layer to run a bash. Reminder: msysGit is the development environment to compile Git for Windows.

1- open git bash and make a folder in your selected address for back end example you can make a new folder in Git Bash with #mkdir command and open the folder in VScode environment with #code.. command

2- Add a new .js file to the folder and name it server.js. This file is server of project add below codes to the server.js file:

I tried to explain very brief about per line of codes in server.js in the comment at the picture but for more information you can watch the video on this link: https://expressjs.com/

3- right click on server.js and select open in terminal option and at the terminal with npm init command and answer questions of new file (can answer just by enter) make a new file (package.json)

4- Now with npm install express command install express module on your project to can run it. At the end with node server or node server.js command run your project

5- In this step should make a route to solve Cannot Get / error on our project. So we should make a new folder (routes) and add a new .js file (html-routes.js) to it. After writing html-routes.js and running project you should see Hello from simple-react project on the browser on localhost:3000 address

6- Now we have to connect to the MySQL database. SO we should add some more code for making a connection between database and server on server.js file:

7- Now with npm instal mysql command at the terminal we should add MySQL module to the project. After run we will see below error on the terminal and we have to do another step to fix it. This is an issue in MySQL version 8

put username and password of your database

At the end:

resources:

https://medium.freecodecamp.org/what-exactly-is-node-js-ae36e97449f5
https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm
https://stackoverflow.com/questions/17807485/what-is-the-exact-meaning-of-git-bash

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 2)

Maryam Keshavarz — Thu, 01 Nov 2018 09:12:28 +0000

in this article I describe about making new database and tables in MySQL database.

To make a new database on MySQL workbench press database icon in top navbar.It’s like:
writing CREATE SCHEMA nameOf_db;
command on mysql command line
Then insert your new database name and press apply button:
Now in sidebar find name of your database and right click on it to see create tables option, then click on it:
in opened window write table name and name of fields in that table and type of data for each field: Before continue it's useful to know about data type in sql:
CHARACTER [(length)] or CHAR [(length)] ---> strings, including Unicode
VARCHAR (length) ---> string
NVARCHAR (lenght) ---> string with other language string
BOOLEAN ---> TRUE or FALSE
SMALLINT ---> integer value between the range 2^ -15 and 2^15 -1
INTEGER or INT ---> integer value between the range 2^ -31 and 2^31 -1
DECIMAL ---> Precision defaults to 38, Scale defaults to 0
DECIMAL(p) ---> Scale defaults to 0
DECIMAL(p, s) ---> Precision and Scale are defined by the user
NUMERIC [(p[,s])] ---> same way as the DECIMAL data type
REAL ---> approximate numeric values, up to a precision of 64
FLOAT(p) ---> approximate numeric values
DOUBLE PRECISION ---> approximate numeric values
DATE ---> date values YYYY-MM-DD
TIME ---> time values HH:MM:SS
TIMESTAMP ---> timestamp values YYYY-MM-DD HH:MM:SS
CLOB [(length)] or CHARACTER LARGE OBJECT [(length)] or CHAR LARGE OBJECT [(length)] ---> character strings longer than those that are allowed in the CHARACTER [(length)] or VARCHAR (length) data types
BLOB [(length)] or BINARY LARGE OBJECT [(length)] ---> binary values we can also use MySQL command prompt to add below codes and create this table without workbranch:

resources:
http://www.cs.toronto.edu/~nn/csc309-20085/guide/pointbase/docs/html/htmlfiles/dev_datatypesandconversionsFIN.html

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 1)

Maryam Keshavarz — Wed, 31 Oct 2018 07:27:51 +0000

in this article I describe about databases and type of them and installation of MySQL Database for backend development.

* What is database?

database is a collection of information with Regular structure that can be easily accessed, managed and updated.

* What are database elements?

Tables are elements of database. A database table is composed of records and fields that hold data. Tables are also called datasheets. Each table in a database holds data about a different, but related, subject.

* What are the different types of databases?

1- Relational databases(RDBMS) or SQL data structure: * databases like MySQL, Oracle, PostgreSQL use structured query language (SQL) for defining and manipulating data. * It is a safe choice and especially great for complex queries, but it can be restrictive. * It uses predefined schemas to determine the structure of your data before you work with it and all of your data must follow the same structure.
2- non-relational #NoSQL data structure: * A non-relational database like MongoDB, BigTable, Redis, RavenDB Cassandra, HBase, Neo4j and CouchDB have dynamic schema for unstructured data, and data is stored in many ways: it can be column-oriented, document-oriented, graph-based or organized as a KeyValue store

how to start work with MySQL database?

installation:
- Open https://dev.mysql.com/downloads/mysql/ link and download mysql:
After download and start installation in choosing a setup type use custom item because we need only install MySQL as a database:
Make sure your configuration should be like below information:
For Authentication Method insert your selected password and push add user button:
open up below link to download and install MySQL workbench to have visual MySQL database: https://dev.mysql.com/downloads/workbench/
After installation open up MySQL 8.0 command line client from MySQL folder in start menu and enter your MySQL’s password and press enter button
run MySQL Workbench Press local instance MySQL in the gray square and insert password of database:

now MySQL is running and we are ready to make database and tables.

10.31.2018
resources: