Creating First Angular 2 App

Hello All. So today I am going to show you all how to create your first Angular2 App. I provided a link to Angular’s 5 Min Quickstart.

Here are some prerequisites I recommend installing.

  • Node.js at least version 4. I have 6.3.0  and npm version 3.10.3

You will need a package.json file

{
“name”: “angular2-quickstart”,
“version”: “1.0.0”,
“scripts”: {
“start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “,
“lite”: “lite-server”,
“postinstall”: “typings install”,
“tsc”: “tsc”,
“tsc:w”: “tsc -w”,
“typings”: “typings”
},
“license”: “ISC”,
“dependencies”: {
“@angular/common”: “2.0.0-rc.4”,
“@angular/compiler”: “2.0.0-rc.4”,
“@angular/core”: “2.0.0-rc.4”,
“@angular/forms”: “0.2.0”,
“@angular/http”: “2.0.0-rc.4”,
“@angular/platform-browser”: “2.0.0-rc.4”,
“@angular/platform-browser-dynamic”: “2.0.0-rc.4”,
“@angular/router”: “3.0.0-beta.1”,
“@angular/router-deprecated”: “2.0.0-rc.2”,
“@angular/upgrade”: “2.0.0-rc.4”,
“systemjs”: “0.19.27”,
“core-js”: “^2.4.0”,
“reflect-metadata”: “^0.1.3”,
“rxjs”: “5.0.0-beta.6”,
“zone.js”: “^0.6.12”,
“angular2-in-memory-web-api”: “0.0.14”,
“bootstrap”: “^3.3.6”
},
“devDependencies”: {
“concurrently”: “^2.0.0”,
“lite-server”: “^2.2.0”,
“typescript”: “^1.8.10”,
“typings”:”^1.0.4″
}
}

Connecting to MySql using PHP

connecting to mysql using mysql_connect() has been depreciated

so now using mysqli() I am able to connect to mysql database.

since it is object orientated programming we can utilize features such as $con->query() instead of calling mysql_query($sql,$con) and you can pass the database info inside mysqli() instead of using mysql_select_db()

<?php
error_reporting(0);
if(!empty($_POST))
{
if(isset($_POST[‘name’],$_POST[’email’],$_POST[‘phone_number’],$_POST[‘job_requested’]))

{
$name  = trim($_POST[‘name’]);
$email = trim($_POST[’email’]);
$phone = trim($_POST[‘phone_number’]);
$job   = trim($_POST[‘job_requested’]);
$today = date(“F j, Y, g:i a”);
}
}

$con = new mysqli(‘dbLocation’,’username’,’password’, ‘databasename’);
if(!empty($name) && !empty($email) && !empty($phone) && !empty($job))
{
$sql=”INSERT INTO table (name, email,phone_number,job_requested,DateRequested)
VALUES
(‘$_POST[name]’,’$_POST[email]’,’$_POST[phone_number]’,’$_POST[job_requested]’,’$today’)”;

if($result = $con->query($sql) or die(“Sorry could not connect to database because ” . $con->error))
{
//create a success event

send email event

$to = “email@email.com”;
$subject = “A job have been requested”;
$message = “On ” . $today . ” a job request for ” . $job . ” from ” . $name . ” was placed. Please email them at ” . $email . ” or call them at ” . $phone;
$headers = “From:” . $email;
mail($to, $subject, $message,$headers);
}
}
?>

Programming Resources

Python Tutor
Computer Science Circle
Interactive Python

Learning Python

So I started learning Python.
Tried some tutorials. The tutorial was showing a simple code.

For 1 in range(5):
print i;

The result showed on the tutorial
0
1
2
3
4
When I tried it I got a syntax error. =(
When I looked up the code I found it was made with Python 2.7.
I was using Python 3.4 in which they change the print function.
Changed my code to

For 1 in range(5):
print (i, '');
The result showed
0
1
2
3
4

Create music player

Using jPlayer’s circle player I created a random music player. Here is the jQuery code

$(document).ready(function(){
var currentSong;

var songlists = new Array();
songlists[0] = “/Audio/preciosa.mp3”;
songlists[1] = “/Audio/ElComejen.mp3”;
songlists[2] = “/Audio/rvdancingmoon.mp3”;
var random = Math.ceil(Math.random() * songlists.length) – 1;
currentSong = songlists[random];

var myCirclePlayer = new CirclePlayer(“#jquery_jplayer_1”,
{
mp3: currentSong

}, {
playlistOptions: {
enableRemoveControls: true
},
cssSelectorAncestor: “#cp_container_1”,
swfPath: “js”,
supplied: “mp3”
});

});

Here is the html code
<div id="jquery_jplayer_1"></div>
<div> <!-- A wrapper to emulate use in a webpage and center align --><!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1">
<div> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div></div>
<div></div></div>
<div> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div></div>
<div></div></div>
<div></div>
<ul>
<li><a tabindex="0"></a></li>
<li><a tabindex="0"></a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul></div></div></div>

You reference the three js files


<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script src="js/circle.player.js" type="text/javascript"></script>
<script src="js/Audioplayer.js" type="text/javascript"></script>

Create a php gallery

A tutorial on how to create a PHP gallery.

Below we have the php code to call the folder where the images are kept.

I called it

getfolderinfo1.php


<?php
$files = "";
function returnimages($dirname=".") {
$curimage=0;
$location = 'ftp://blah:blah@www.dreamcpu.com/images';

if ($handle = opendir($location)) {
/* This is the correct way to loop over the directory as per php.net. */
while (false !== ($entry = readdir($handle))) {
$ext = substr($entry,strpos($entry, ‘.’),4);
if($entry != “.” && $entry != “..”){
$allowed_extenstions= array(“.jpg”,”.jpeg”,”.png”,”.gif”);
if(in_array($ext,$allowed_extenstions)){

echo “\n”;
echo ‘galleryarray[‘.$curimage.’]=”‘.$entry.'”;’;
$curimage++;
}
}
}
closedir($handle);
}
}
//this will be written to client side
$location = ‘m-image’;
echo ‘var locations =”‘ .$location. ‘”;’;
echo ‘var galleryarray=new Array();’; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

This is the output

php gallery text

output for the php gallery file

Now to explain each part of the PHP file

$files = ""; --->  is assigning nothing to $files variable.

function returnimages($dirname=".") —> creating the function called returnimages

and ($dirname=”.”) —> indicating the current directory.

$curimage=0; —> will be used on the array assigning a number to each image found.

$location = 'ftp://blah:blah@www.dreamcpu.com/images'; –> is the location of the images.

if ($handle = opendir($location)) {  —> $handle is assigned to the opendir function.

while (false !== ($entry = readdir($handle))) { —> loops through the directory.

$ext = substr($entry,strpos($entry, ‘.’),4); —> assign $ext to the substring function.

substr($entry,strpos($entry, ‘.’),4); —> what this function is doing is looking for . in the name of the file then goes from the . then the rest of the extension. (ie: .jpg)

if($entry != “.” && $entry != “..”){  —> strips out . and .. from the folder.

$allowed_extenstions= array(“.jpg”,”.jpeg”,”.png”,”.gif”); —> is the array of allowed extensions.

if(in_array($ext,$allowed_extenstions)){ —-> checks to see if the extension is in the array
echo “\n”; —> writes  a new line.
echo ‘galleryarray[‘.$curimage.’]=”‘.$entry.'”;’; —> writes out the galleryarray and assign a number which we saw in the pictured example.
$curimage++; —> adds 1 to curimage.
}

closedir($handle); —> closes the connection to the directory.

$location = ‘ftp://blah:blah@www.dreamcpu.com/images’; —> write the $location again since it’s out side the function
echo ‘var locations =”‘ .$location. ‘”;’;
echo ‘var galleryarray=new Array();’;  —> Define array in JavaScript
returnimages()   —> Output the array elements containing the image file names

This is the code for the client side.

<!DOCTYPE html>

<html>

<head>

<script src=”getfolderinfo1.php”></script>

</head>
<body>
<script type=”text/javascript”>
var curimg=0;
function rotateimages(){
document.write(“<div class=’wrapr’><div class=’imgnav’><div class=’imglist’><ul class=’imgtest’>”);
for (curimg=0;curimg<galleryarray.length-1;curimg++){
var ids= curimg;
var hids=”imghref”+curimg;
document.write(“<li class=’panel’><a href=http://www.sinacomp.com/images/”+galleryarray[curimg]+”><img id='”+ids+”‘/></li></a>”);
document.getElementById(ids).setAttribute(“src”, locations+”/”+galleryarray[curimg])
document.getElementById(ids).setAttribute(“width”,”300px”)
document.getElementById(ids).setAttribute(“height”,”300px”)
curimg=(curimg<galleryarray.length-1)? curimg+0 : 0
}
document.write(“</ul></div></div></div>”);
}
</script>

<div>
<script type=”text/javascript”>
rotateimages();
</script>
</div>

</body>

</html>

Writing your first jQuery function.

With my first tutorial I am going to show you how to make your first jQuery function from beginning to end.
For those who want to learn jQuery I am glad to help you out.
First things first. Lets get jQuery working on your site. You can download the jQuery library and have it hosted locally or you can point to the jQuery library from an external site. I call an external site.  I use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>. This is placed in between the <head> section of your site. So it looks like this…

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
...
...
</html>

Now that our website is now calling in the jQuery library lets create our first function.
Take out your favorite html editor. Mine is Notepad ++. It has so many options and allow for snippets and plugins, plus it allows to save in so many different languages.
Create a new file and lets start creating your function.
Type in…


$(document).ready(function(){

});

What this does is tell the client to wait for the document to be ready before executing your function.

Now we need something to code against. So on your page create an button with a class name of test.

<button class="test" >Test</button>

Now we code against the test class.
in between

$(document).ready(function(){

});

type in


$(".test").click(function(){
alert("Hello World!!!");
});

So your code will look like this…


$(document).ready(function(){
$(".test").click(function(){
alert("Hello World!!!");
});
});

Now save it as myfirstjs.js and call it in your website at the end of the page before </body>

<script type="text/javascript" src="myfirstjs.js"></script>

When you click on your button you should get a messagebox that says Hello World!!!.
If you didn’t verify that the location of myfirstjs.js is in the same as your html file.
If it is in another folder just change the src to src=”foldername/myfirstjs.js” where foldername is the name of the location it is in.
Please leave me a comment if you have any questions or comments.
Thank you for checking out my first tutorial.