Web-Pack

Exaple :

 

.

Category: JS | Comments Off on Web-Pack

MySQL 1st Notes.

Helpful Links:

  • MySQL Documentation: Link
  • Direct Link to MySQL Docs String Functions: Link
  • TutorialsPoint MySQL: Link

Now lest dive in MySQL Sea.


MySQL in “Cloud 9”

In this class we will be using ” Cloud-9 ” and latter we will be installing in Linux.

Note: read the following Article-Link, there explains that some of the commands that you will use in “Cloud 9” when using MySQL, are not real MySQL command but some commands that they program in the dev-environment just remember that when using MySQL in your Local-Machine few commands could be different.

Cloud-9: MySQL Starting Commands:

 

MySQL Commands:

Tables:

  • Columns = ( headers );
  • Rows = ( the actual data );

 

Data Types: for a complete list see Docs, but for this moment we will use only two;

  • INT: For whole numbers no decimals.
  • VARCHAR: For strings with max 255 characterers.

 

How to create a TABLE:

Table Commands

In the following example I create a new table call players and then delete it.

Inserting data in to the Tables:

For this example I recreated the TABLE players now lest put data inside, the command to do so is:

Now this is real example:

You can insert and delete by BULK, example in our players table.

if you ever get a feed back with the word “warning” you can request the computer to show you the warnings with:  $ SHOW WARNINGS;

 

What’s Up with NULL in MySQL?

I will add a player to the table but I will not specify the Goals.

This happen because the TABLE in the NULL header, each row has “YES” as a valid default value if value is not provided at the moment of the Data Entry.

Ok good to know, so how can I prevent it from happen, well when creating the table we need to specify that we do NOT ALLOW NULL to be the DEFAULT VALUE, in the next example we create a new Table but we state NOT NULL ALLOW.

NOTE: NOT NULL will make it a require value and can not be left empty.

Same table with data and pushing more incomplete rows.

In the last section about null basically we were telling the computer if we allow it to use the Null if the default value is === NULL. in the next section we will actually tell the computer what is the DEFAULT VALUES THAT WE WANT, by default the TABLE have NULL, but you can change that at the moment of the TABLE creation.

SET DEFAULT VALUES:

In the last example if we did not specify the name or age we have some default values, but nothing is stopping us for deliberate put a NULL with something like:

INSERT INTO cats (name, age) VALUES ( ‘Candy’, NULL);

NOT NULL

If you really do not want NULL  you can specify it with the following syntax at the moment of the TABLE CREATION.

 

The KEYS ?

In the TABLE header KEY is empty. this is an space for the “PRIMARY KEY”

PRIMARY KEY AUTO_INCREMENT

If you do not want to provide the PRIMARY KEY, because is hard to keep track of what was the last, you can tell the computer to doit automatically. and you DO NOT need to specify it when INSERTING INTO the TABLE.

One more example:

 

 

C-RUD

This acronym stands for: Create, Read, Update, Delete.

We already create data with the command: INSER INTO <db_name> (a, b) VALUES (a, b);

Now here are some examples in how to to review and search for data:

SELECT

A quick example:

But this is not very specific, to do that we need new tools;

the WHERE clause

In the following we want to display Name and Age of the cats with breed, “Tabby”

Here we want to know the ID & the Age for those cats that the cat_id is the same as it’s age or in other words, cat_id = name;

fro a detail of the commands:

Aliases

Easier to read results, this means that if the Header of the Table data is not descriptive or you just want a different Header, here is a simple way to do it:

in the following example I will request all the data of the table but the Header “breed“, I want to change it for “Raza

Yo can also add ‘ ‘ to add spaces on the headers:

UPDATE

How to update data that is already in a table.

But if you want to be more specific to target just one line:

DELETE

Remember once something is deleted is gone and NO WAY to get it BACK:

Syntax Example:

Use of example:

 

Another example:

If you want to delete all the data in the cats table but keep the table:

STRING FUNCTIONS

The first thing the will learn to do is how to run the SQL COMMANDS from a source file, so we do not have to type all the commands in the terminal, in order to do that we need to:

Create a new file with extension “file_name.sql

Write the SQL code on the file, and save it.

Start the MySQL interactive Shell.

USE the database where you want to create or manipulate TABLE.

Example Code:

When running the scripts, the script must be on the same directory than the DATA-BASE or you need to stipulate the phat of the script.

BOOKS TABLE EXERCISE

Will will start by creating a new data base call: “book_shop“:

Now I will create a file named: “insert-1.sql” in a folder named: “scripts” with the data for the table:

Then in the console we execute the file:

<———————————->

String Functions

—>  CONCAT

Example:

Here we can also use the command “AS” to give better names:

With string function you can use more than 1 at the time

—>  CONCAT_WS

Here you provide a string separator in case that you wan to concatenate may elements so you do not need to type the separator multiple times:

 

 

 

.

Category: Database | Comments Off on MySQL 1st Notes.

SLACK

This is an amazing tool where you can communicate, ask questions and stay in contact with other people.  and is free

What is Slack?

 

15 Slack tips in 5 minutes

 

Slack Tutorial. Inbox Zero for Everything

 

How to Slack Like A Pro In Less Than 5 Minutes

Now you know how to use it, try to log in to other chanesl where you can meet people in the industry and also help.

 

Category: Web-Dev-Training | Comments Off on SLACK

ES7

Here is the information about ES7, but before we get there there are a couple of configurations that we need to do to the Dev-Environment. first you need the first part of the environment on this: link

Make sure that you do the last part in the bottom for ED7, and when finish check your file: package.json the part of babel should have the “es2016”  if not type it yourself.

 


 

.

Category: JS | Comments Off on ES7

React.JS – Enviroment Set-Up: WebPack & Babel

In this little tutorial we will install the Developer environment for React.js using:

  • Node.js
  • WebPack
  • Babel
  • React Libraries.

we will divide this in three parts

  1. ES6 Server Set-Up (WebPack + Babel)
  2. React Enviroment Set-Up
  3. Code a basic React.js App

If you don’t have Node.js install follow the instructions in this: link

Part 1 – ES6 Server Set-Up (WebPack + Babel)

WebPack Installation

Here is a link that you can use to learn more about WebPack Installation: link

CD to the developing directory, and run the command “npm init -y” to start the project

Now install WebPack. This will update the “package.json”

Create file folders:

Now create a folder named: “build” and inside create the: “index.html” & “bundle.js” files.

 

Then creat another folder named: “app” and inside create another “index.js

 

Create the configuration pack:

Create new configuration file named: “webpack.config.js” in the Root-Working directory, this is the file where we tell where to get the code and where to put it after conversion, basically you will have a code like:

because Im using Linux I need to provide an absolute path:

path: ‘/home/edmundo/Dropbox/02-Helio-Training/01-Code-Projects/01-JavaScript/03-ES6/build‘,

Then we need to modify the “package.json” file, in the area of scripts we delete the test line and instead we add: “build”: “webpack” The code should look like:

 

Finally we need to test if WebPack is running by going to the Terminal and typing:  npm run build  and you should get a screen like:

If things are not working: install webpac golbally: sudo npm install webpack -g

Now if you go to the folder: “build” you will notice the files there

Installing Babel.

In the terminal:

Now we need to update the file: “webpack.config.js” to description : LINK

Next we need to update to “package.json”

After those changes go to the Terminal and type: “npm start“, then go to the browser and go to: http://localhost:3000/  and open the console

then open “index.js” in the “app” folder and add some JavaScript code then [Ctrl] + [S]  and see how automatic the changes are transfer to “bundle.js” you can use this configuration to run ES6 Code.

 

Part 2 – React.js Enviroment Set-Up

Now we need other tools or Node-Packages to get them CD to the working folder in the Terminal and type:

Next we need to do some changes in our set-up files.

Open the file: “package.json” with Atom

Next in the folder “build” open the file “index.html” and make sure you have a <div> with the ID of “root” inside of the <body> tags.

And with this the environment is ready for us to code our React.js App.

Part  – Code Basic React.js App

First open the file: “index.js” here is where we will code the app:

Another option is a little more complex because we are creating a full component utilizing JavaScript Calsses, chose one or the other, it doesn’t really matter.

Now run the server in Terminal ” npm start ” and in the browser go to ” http://localhost:3000/ ” and you should see the new line render.

And just like this the most basic React.js App is done.

If you want to add bootstrap to you react app you should install that dependency:

 

 

 

ES7 – Enviroment Set-Up

Go to the terminal and type:

Now go to the file: ” package.json “:

and you should be OK.

 

.

Category: React | Comments Off on React.JS – Enviroment Set-Up: WebPack & Babel

Storing & retrieving Data in the CPU

To start with you need to have Node installed, if you do not have it use this: Link

Starting the Project:

Now crate a Directory this directory will have the “Blue-Prints” that node will use to build the App, make sure to “Terminal” “cd abc” into the directory, there initialize npm using the command:

Here is where node will ask you few questions, about the project that you are initializing, if you do not want to answer the question just press “Enter” and Node will use the default answer which you can see in parenthesis, then Node will pass to ask the next question.

The last question will ask you to review the answer that you just give, and if you say OK, it will create a JSON file with that information. (you can edit this file latter.)

Now if you see the directory you will see that Node just create a file named: “package.json” that file has the configuration parameters for your App, this is also the place were we will be storing the 3rd party libraries that we require, so each time that we use this “Blue-Prints” to build our App Node will make sure to check this file to see what other Library  or  Module, or Dependency  it has to bundle when building the app.

Next we will install a Module that will allow-us to store data Locally into our computer, this module name is:  node-persist witth the commad: npm install node-persist@0.0.6 –save

Let me explain what just happen, here Node it tells you that will install the Module: node-persist then it tells you that this module in order to work needs to install other modules and tells you the name of those modules, the version and Install them.

You will also notice  that thanks to the flag  ” –save  ” this will modify your JSON file.

You will also notice that it create a new folder named: “node_modules” inside you can find a folder for each module installed, also the ones that you do not install but the got installed as a requirement to a module you install.

Create Script to Start the APP  “app.js”:

In the directory create a new file and name it: app.js  and add the code: ” console.log(“Starting Edxael’s Passwor Manager”); ” and save it.

Then lest modify our JSON file. in the section of “scripts” we will add a new script that will be executed when we use the command: “ npm start “.

Remember we create the file “app.js” lest add this script to the list of scripts executed when we run the “npm start” command.

Now when we run the “npm start” command in the Terminal, code in the “app.jswill be executed.

—————————

Storing & retrieving Data in the CPU:

here we will get data and store this data in a file in the computer.

1st – To do this we will use the Module that we install “node-persist” to be able to to use it we will require it and store it in a variable in our “app.js” file:

Basic example in how to create a variable that is stored in the computer:

Another example, in this case we create a variable that will be the database for the Bank Accounts:

Now lest add one more account:

  1. Load the Browser var ‘dbase‘ with the current data in the CPU var: ‘accounts
  2. Add the new account to the Browser variable: ‘dbase
  3. Sync the data in ‘dbase‘ with the CPU variable ‘accounts

Then the next time that you need to get the data from the CPU:

 

 

 

 

.

Category: Node | Comments Off on Storing & retrieving Data in the CPU

Learning JavaScript

We talk before why it would be a great idea to learn JavaScript, now on this post we will start the process to learn JavaScript, on this part of the class we will use several resources from the internet. to learn JavaScript and know how to create more complex and awesome JavaScript Applications.

The following is a list of the projects that we will create once we know basic JavaScript.

  1. Singer website & Upload to internet
  2. Add two number using JavaScript
  3. Basic Portfolio Website
  4. Temperature Converter
  5. Image Resize Calculator
  6. Fizz – Buzz
  7. Basic Calculator (eval.)
  8. Keyboard Piano
  9. Wedding Guest Book
  10. To-Do List
  11. Pong (The Game)

 

Before we move forward and do this projects we should learn the basics of JavaScript, and that is what we will be learning in the following classes.

 

On your personal learning you should use whatever resource that is best for you, here is a list of some of the resources that we advice:

 

Tex Editor
Atom: Link
 .
Reference Sites:
Mozilla Developer Network: Link
DevDocs.io (JavaScript): Link
Tutorials Point (JavaScript): Link
The Modern JavaScript Tutorial: Link
SCOTCH.IO : Link
 .
JavaScript homework and exercises: 
CodeWars.com: Link
.
For text editor we should use Atom + Chrome, or the CodeWars interface, but if you want to use an online compiler my choice is REPL here is the: LINK
 .

 DOCUMENTS:

PDF to Read-1:   DONWLOAD

01-Basics

.

 

PDF to Read-2:    DONWLOAD

02-Eloquent_JavaScript

 

I will create videos with all this information latter, for now I will share the already created videos on one YouTuber:

01 – JavaScript – The Basics.

.

02 – ES6 JavaScript – The Basics

.

Finally do not forget to practice using CodeWars.com

KATAS:

  1. Opposite Number: Link
  2. String Repeat: Link
  3. Find Multiples of a Number: Link
  4. Pole Vault Starting Marks: Link
  5. Unfinished Loop: Link

.

Category: Web-Dev-Training | Comments Off on Learning JavaScript