Tuesday, 16 June 2020

create an npm package with a simple node.js module on ubuntu

Today I want to create a npm package for a simple javascriptlibrary with modules and some tests. Src:https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-configuring-npm-and-creating-a-package-json

At first we need a git repository on github.

Create a repository named "starwarsNames"

Login into your github account and create a new repository "starwarsNames"

echo "# starwarsNames" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/pboethig/starwarsNames.git
git push -u origin master

create an account on https://www.npmjs.com, if you dont have one
You will need an account there to publish your extension. 

Remember your <npm-username> you will need it.

Install nodejs
$ apt-get install nodejs
$ sudo ln -s /usr/bin/nodejs /usr/bin/node  

Install npm, if npm is not installed 
$ apt-get install npm 


If you are on windows you have to install it manualy, If you are on mac, you can use the packagemanager,

At next we inititialize the npm project. 
$ npm set init-author-name 'Your Name'
$ npm set init-author-email 'your email'
$ npm set init-author-license 'MIT'
$ npm set save-exact true

If you want to check that config, you can do it with
$ cat ~/.npmrc

Add your npm user to your project 
$ npm adduser
Username: <your npm-username>
Password: <your npm-password>
Email: (this IS public) <your npm-email>

Initilize your npm project
$ npm init

this will ask some data from you, and puts outs the package.json for you

name: (starwars-names-<your npm username>)
version: (1.0.0)
license: (MIT)
About to write to /var/www/html/starwarsNames/package.json:

{
  "name": "starwars-names",
  "version": "1.0.0",
  "description": "get random starwars names",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/pboethig/starwarsNames.git"
  },
  "keywords": [
    "random",
    "starwars"
  ],
  "author": "pboethig",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/pboethig/starwarsNames/issues"
  },
  "homepage": "https://github.com/pboethig/starwarsNames#readme"
}

Okay. Lets create our first module:
- create a folder "src" in your projectroot to store our module sources.
- now , create a file "index.js" in the new src folder

Open this new file in your code editor. I am using vscode for it. That editor  has great node.js plugins.

Now we want to define our modulestructure. 
Type following code in index.js

var starWarsNames = require('./starwars-names.json');
module.exports =
{
    all,
    random
};
             


 
This tells node that you want to store the "starwars-names.json" list in a variable, that your module will use and it exports 2 properties ("all" and "random")

At next save the starwarsnames in a file "starwars-names.json" in your "src" folder:
 
 
[
  "4-LOM",
  "Ayla Secura",
  "Admiral Ackbar",
  "Ahsoka Tano",
  "Anakin Solo",
  "Asajj Ventress",
  "Aurra Sing",
  "Senator Bail Organa",
  "Barris Offee",
  "Bastila Shan",
  "Ben Skywalker",
  "Bib Fortuna",
  "Boba Fett",
  "Bossk",
  "Brakiss",
  "C-3PO",
  "Cad Bane",
  "Cade Skywalker",
  "Callista Ming",
  "Captain Rex",
  "Carnor Jax",
  "Chewbacca",
  "Clone Commander Cody",
  "Count Dooku",
  "Darth Bane",
  "Darth Krayt",
  "Darth Malgus",
  "Darth Maul",
  "Darth Nihilus",
  "Darth Vader",
  "Dash Rendar",
  "Dengar",
  "Durge",
  "Emperor Palpatine",
  "Exar Kun",
  "Galen Marek",
  "General Crix Madine",
  "General Dodonna",
  "General Grievous",
  "General Veers",
  "Gilad Pellaeon",
  "Grand Moff Tarkin",
  "Greedo",
  "Han Solo",
  "IG 88",
  "Jabba The Hutt",
  "Jacen Solo",
  "Jaina Solo",
  "Jango Fett",
  "Jarael",
  "Jerec",
  "Joruus CBaoth",
  "Kent C. Dodds",
  "Ki-Adi-Mundi",
  "Kir Kanos",
  "Kit Fisto",
  "Kueller",
  "Kyle Katarn",
  "Kyp Durron",
  "Lando Calrissian",
  "Luke Skywalker",
  "Luminara Unduli",
  "Lumiya",
  "Mace Windu",
  "Mara Jade",
  "Mission Vao",
  "Natasi Daala",
  "Nom Anor",
  "Obi-Wan Kenobi",
  "Padmé Admidala",
  "Plo Koon",
  "Pre Vizsla",
  "Prince Xizor",
  "Princess Leia",
  "Proxy",
  "Qui-Gon Jinn",
  "Quinlan Vos",
  "R2-D2",
  "Rahm Kota",
  "Satele Shan",
  "Savage Opress",
  "Sebulba",
  "Shaak Ti",
  "Shmi Skywalker",
  "Talon Karrde",
  "Ulic Qel-Droma",
  "Visas Marr",
  "Watto",
  "Wedge Antilles",
  "Yoda",
  "Zam Wesell",
  "Zayne Carrick",
  "Zuckuss"
]

At next we need a further npm library called unique-random-array.
Lets install it with:

$ npm install --save unique-random-array

This will save the new library to our dependency definition in package.json

Now lets use the new array library in our index.js
 
var uniqueRandomArray = require('unique-random-array');
var starWarsNames = require('./starwars-names.json');
module.exports =
{
    all,
    random
};


Our index.js now looks like that

var uniqueRandomArray = require('unique-random-array');
var starWarsNames = require('./starwars-names.json');
module.exports =
{
    all: starWarsNames,
    random:uniqueRandomArray(starWarsNames)
};
Now that we have the library included, lets use it in our module.

In the export function, we want to reference all starwars-names to the property "all" and a random startwars-name to the property "random".

To to that we only have to export the local variable "starwarsNames" to the global scope by referencing the  exportproperty "all" and the array-function uniqueRandomArray(starwarsNames) from our new library to the export-property "random". Here is the code of "index.js".
Now our index.js looks like that 

 var uniqueRandomArray = require('unique-random-array');
var starWarsNames = require('./starwars-names.json');
module.exports =
{
    all: starWarsNames,
    random:uniqueRandomArray(starWarsNames)
};

Yeah, we havehacked our first node module.

Lets test it!
- open a terminal and navigate to the root folder of your app 
$ node
$ var starwarsNames = require('./src/index.js');
$ starwarsNames.all
$ starwarsNames.random()  

The single commands will output the whole list of names and a random name from the list. Thats realy great!


Now we want to publish it in npm as an own package. 
For that, we have to commit it to our git repository.

open a terminal:
$ cmd to your projectroot
$ touch .gitignore
$ nano .gitignore

add "node_modules" to your .gitignore to prevent commiting the node_modules.

$ git add *
$ git commit -m "init"
$ git push origin master

Thats it.

Now we can publish it to npm.
Thats realy simple.

Just type:
$ npm publish

That it. Now you should directly see your new package on npm !

This is awesome!

Now we want to test, if our module is directly usable via npm.
- open a terminal to the desktop 
$ npm install starwars-names-<your npm_user> 

Super. Now you can use your library, from anywhere in the world.
switch to the desktop and create a file named "test.js" with following content:

var starwarsNames = require('starwars-names-mittax');
console.log(starwarsNames.all);
console.log(starwarsNames.random());

Now run a terminal and cd to the directory where you have stored test.js and run:
$ node test.js

You will now see the results from your library.

This is realy cool!


Thanky to Kent.C.Dotts for the great video! 

Monday, 8 June 2020

Step to Create Your Own Blogger Template


I've always wanted to create my own Blogger template and tried so many times before but couldn't really get it right. I think I finally understood a somehow large chunk of it. I think.
Anyway, here in this post, I will note about the things I have learned/will learn in creating your own template. I won't be getting into much detailed stuff on HTML and CSS how to's. I'm assuming that you already have basic knowledge on these subjects and that you know your way around Blogger. Still, if you have any questions or there is something I didn't explain well, just feel free to leave a comment, and hopefully I can answer it.
Also, since I am also just learning about this, please don't expect a fully functional and Template-Designer-compatible template -- especially since I don't really use the Template Designer. However, I will try to make it as flexible as possible.
If you are to follow along the stuff I will note below, here are some suggested steps on getting started:
  1. Create a new blog for your test template, if you haven't got one yet and select a Simple template. It's best if everything is in its default state. This way, you can really see the changes you apply in your template. Also you wouldn't want to play around with your live blogs and unintentionally mess it up.
  2. Before making any changes, download a copy of the template (Template » Backup/Restore) for reference.
  3. For your test blog, in the Layout page, remove all widgets (Archive, Profile, Lists...) except for Blog Posts. If you can't get rid of the Header and Attribution widgets, edit the template (Template » Edit HTML) and search for Header1. On that line of code, change locked='true' to locked='false'. Do the same for the Attribution by searching Attribution1. Once done, go back to the Layout page and try deleting them. Hopefully that should work. UPDATE: Removing the widget in Blogger's HTML editor will also remove the widget from your template layout (unlike before). Yay!
  4. Once you remove all possible widgets, create a New Post. You can use default text templates found here at Html Ipsum. These templates already consists of HTML tags you would normally use in a blog post. Having a test post like this will be a big help in designing your template.
  5. Also, don't forget to set your test blog's privacy settings - Not listed on Blogger; Not visible to search engines. If you won't be using external apps for further testing, you can also set the permission (Blog readers) to Blog author instead of Anyone.
Stripped the Layout.
Fig.1 - Stripped the Layout.
Now onto the code and stuff. If you are editing your template's xml file in a different editor (like Notepad++) other than Blogger's, be sure to set its encoding to UTF-8 without BOM.

Understanding the <b:section> and <b:widget> tags

Must read: Intro, Section and Widget attributes. This page gives a brief explanation of the Section and Widget parts of the template. Also the attributes of the <b:section> and <b:widget> tags are listed here which we will use later on.
Blogger Template Sections and Widgets
Fig.2 - Just a quick summary minus the attributes.
So I made some tests and this is the leanest code I can upload to Blogger. This, by the way, is based on the Simple template - well at least the first 15 or so lines.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
  </b:skin>
</head>

<body>
  
  <b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
  </b:section>

</body>
</html>
Fig. 3 - Simplest template code.
I tried leaving out the <b:skin/> tags but I get a
We were unable to save your template. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: (SyntaxError) : Unexpected token <
UPDATE: The XML error message now says "There should be one and only one skin in the template, and we found: 0"
Also, the <body> cannot be left empty. It should always at least have a <b:section> tag. Otherwise you would encounter this error:
... XML error message: Could not find a preferred section to add deleted widgets to.
UPDATE: The XML error message now says "We did not find any section in your template. A template must have at least one b:section tag."
So after uploading the template (Fig.3), a quick preview shows me this:
Fig.4 - Template preview.
As seen on the Layout page (Fig.1) and on the preview (Fig.4), the Blog widget will always be set. So looking at the HTML code in Blogger (Template » Edit HTML), you will see that a <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> has been inserted in between the <b:section> tag we created. Note that the id I used for this section is header. This I will change in a bit since I don't think we should leave the Blog widget inside this header section. UPDATE: If you uploaded the template in Fig.3, what you would actually see is an empty page because the Blog widget will no longer be automatically created. You have to add this yourself for you to view any post on the page.
Fig.5 - A Blog widget is automatically created in our template. Make sure to include the Blog widget so that you can view your blog posts. This is no longer automatically created.
Ok so now fixing the Blog widget's location. I created a new <b:section> tag, with an id main for the Blog widget and updated the attributes of the header section. So now we get this:

<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
  </b:section>

  <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  
</body>
Fig.6 - Added a new section for the Blog widget.
Fig.7 - New Layout after adding a new section.
Now that we have an Add a Gadget option for the header section in the Layout page, let's add a Page Header widget. Then on the Edit HTML part of the Template page, you will see the Page Header widget right below the <b:section id='header' ...> tag. Note: Just leave the Expand Widgets Templates unchecked. We won't be needing this just yet.
As a precaution to prevent deleting the Header when someday we are drowsily updating our blog template, set the header's locked attribute to true.
By now, you can probably see the pattern of Blogger's template code. We create sections in the template and specify its attributes. Then on the Layout page, we can add widgets (using Add a Gadget) to the section we have created. Note that we don't necessarily have to use Add a Gadget to add a widget to our template. You can do this manually by coding it in your template.
So for example, I would like to add an HTML/Javascript widget below my blog posts. So following this link mentioned earlier, we can see the syntax and attributes of a <b:widget> tag. I would then code my template like this:

<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>

  <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
    <b:widget id='HTML1' locked='false' title='Test HTML widget' type='HTML' />
  </b:section>
  
</body>
Fig.8 - Manually adding an HTML/Javascript widget.
Then, checking the Layout page, we can see that my HTML/Javascript widget is right in its place.
Fig.9 - HTML/Javascript widget added using the <b:section>tag.
Deleting widgets, however, can't be removed by deleting it from the template code. You need to remove it via the Layout page itself (Edit » Remove). If the Remove option isn't visible on the Edit widget window, check that the widget's locked attribute is set to falseAs mentioned earlier, deleting widgets can also be done now in Blogger's HTML template editor.
Let's now move on to defining the rest of the Sections of our template. Normally, it should have a Header, Navbar, Content, Sidebar and Footer. We already have our Header and Content (main) so let me just add the missing ones.
So after adding the sections along with some widgets, I now have this:

<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>
  
  <b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
  </b:section>
  
  <b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  
  <b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'>
    <b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
    <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
  </b:section>
  
  <b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
    <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
  </b:section>
  
</body>
Fig.9 - Template code with added sections and widgets.
Fig.10 - Layout page with added sections and widgets.
Fig.11 - Template preview.
Some notes:
  • For the <b:section id='nav' ... > tag, I tried using navbar as the id earlier but it wouldn't show up in the saved template and Layout page. It was because the id navbar is already in use. See the navbar widget on the Layout page? I should have noticed that earlier :|
  • Using an invalid id for the widget (e.g. Pagelist1 instead of PageList1) will generate an error.
  • I can't find a complete list of widget types so that I end up using Add a Gadget to install a widget (e.g. PageList, CutomSearch...) then edit its attributes on the template file. If anyone knows where to find one, I'd appreciate a holler..
  • There can be multiple instances of the same widget type. Just be sure to set a different id for each widget - [widgetType][number] (e.g. HTML1, HTML2)
  • I tried removing the title attribute from the PageList in the code but it still remained in the Layout until I removed it via the Gadget's settings.
  • If you are to use you a fluid layout for your blog instead of Blogger's mobile version, I suggest removing the entire <b:if cond='data:blog.isMobile'> block within the <head> tag and replacing it with <meta content='width=device-width,initial-scale=1.0' name='viewport'/> instead.
I think I finally got the Section and Widget basics covered. All you would need now is to style your template and fix the layout using CSS and I guess you would be good to go. For customizing certain areas on your template, I'll be writing separate blog posts for it. But if you want to jump right into customizing your widgets, here is another must-read.
So if you have any questions, don't hesitate to leave a comment and let's see if we can figure it out. Cheers!

Sunday, 9 June 2019

the recreation of thefacebook2004


Hi guys! I'm back with a new article  the recreation of thefacebook2004Thefacebook Clone is nothing more than an attempt to recreate the first version of Facebook was launched in 2003/2004 ,This project aims to be an advanced , lightweight and free clone, being written with PHP , HTML , CSS and with MySQL as data storage. we will discuss about Facebook is a social networking service launched as FaceMash in July 2003, but later changing to TheFacebook on February 4, 2004It was founded by Mark Zuckerberg with his college roommate and fellow Harvard University student Eduardo Saverin. The website's membership was initially limited by the founders to Harvard students, but was expanded to other colleges in the Boston area, the Ivy Leagueand gradually most universities in the United States and Canada,corporationsand by September 2006, to everyone with a valid email address along with an age requirement of being 13 and older

TheFacebook Clone
- Version : 1.0 

Files

index.php

terms.php

privacy.php

contact.php

social_net.php

search.php

profile.php

about.php

register.php

login.php

messages.php

read_message.php

send_message.php

edit_profile.php

edit_privacy.php

edit_account.php

edit_photo.php

my_friends.php

home.php

invite.php

faq.php

logout.php

Images

The recreation of the html, is being based only in images found on the internet.






 















 Hope this post will help you . If you enjoy my work then please share my posts with your buddies and anyone who might be interested in thefacebook2004

                                           coming soon  on Udemy

Tuesday, 4 June 2019

Step to create a WordPress blog using XAMPP

 Hope this post will help you to install WordPress. If you enjoy my work then please share my posts with your buddies and anyone who might be interested in WordPress If you had any problem about this post, please do mention it in the comment section.WordPress is an open-source content management system (CMS). It’s based on PHP and MySQL. It most associates with blogging, E-commerce stores, personal sites and many more. Now WordPress control 30%of the web. In this guide, we discuss how to create a WordPress blog using XAMPP.

 

1) Why WordPress?

It’s FREE                                           SEO Friendly                                  
High Security                                    High Performance
Customizable Design                       Responsive Mobile Sites

2) Step by Step Guide

Step 1 – Prerequisites

1.XAMPP – Apache (A) + MariaDB(M) + PHP(P) + Perl(P)



                     CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
XAMPP is an Open source software. It’s a Stands of Cross-platform (X). we can create a local web server using XAMPP. It’s easy to use and it works with Windows, Linux, and Mac OS. You can use alternative software for XAMPP, such as WAMP, MAMP but today I’m going to focus about XAMPP.
XAMPP Download link (121 MB) – https://www.apachefriends.org/index.html
WAMP download link (286 MB) – http://www.wampserver.com/en/#download-wrapper
MAMP download link (410 MB) – https://www.mamp.info/en/downloads/
2. WordPress (v5.1)



                           CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
WordPress Download link (11 MB) – https://wordpress.org/download/
Step 1 Completed
 

Step 2 – How to install XAMPP.

  • Click on the downloaded XAMPP setup. (If you got any permission message or warning message click “OK” or “YES” button to continue)
  • It will open the XAMPP setup wizard. Click next button to continue.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Now it asked, what components we want to install and what’s not. We only need Apache and MySQL. (select following Components and click the next button to continue)
    • Server
      • Apache – Apache Server
      • MySQL – Database Server
    • Program Language
      • PHP – Hypertext Preprocessor
    • Program Languages
      • phpMyAdmin – Database Control panel



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Choose installation location and click Next (Default: C:\xampp)  (If you got Windows Defender Firewall Permission request, Tick both checkboxes and click Allow access.)
  • Click the next button to continue Now it will install XAMPP (wait till the installation complete) After the installation complete. Click Finish.
  • It will open the XAMPP Control panel automatically.
  • This is a XAMPP Control Panel.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Now click Start up Apache and MySQL (It will start Apache and MySQL servers)
CtechF - How to create WordPress blog using xampp (Localy) - Screenshot

 Now open your web browser and type http://localhost  or http://127.0.0.1 on the address bar.

 

Step 2 Completed

Step 3 – Creating a Database

  • Open a web browser and type http://localhost/phpmyadmin or http://127.0.0.1/phpmyadmin (it will redirect you to phpMyAdmin control page)



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Click Databases and enter the Database Name then click Create, it will create our database.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
My database name is “wpdb2019”
Congratulation! Step 3 Completed

Step 4 – WordPress Installation

Open XAMPP Control Panel and click the explorer button. It will open the XAMPP installation directory.
Open an “htdocs” folder and Copy you’re downloaded WordPress file into the htdocs folder then extract it. (htdocs -> wordpress)
Then rename it whatever you like. I’m going to call it “wordpress”.

WordPress Installation (Normal configuration)
  • Enter http://localhost/wordpress or http://127.0.0.1/wordpress on your browser (It will redirect us to the WordPress installation wizard.)



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Select a language and click Continue.
  • It’s Time to connect database and WordPress. click Let’s go! It will redirect you to the “database configuration page”. Enter your Database Details, Then click submit button to continue.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
Database Name – “wpdb2019” (you’re Database name)
Username – “root” (it’s default root)
Password – “” (it’s default empty)
Database Host – “localhost”
Table Prefix – “wp_”

  • Now time to install WordPress, Press “Run the installation”.
Note: If you got an error message. you need to configure the database manually.

WordPress Installation (Manual Configurations)
  • Open the WordPress folder where you saved WordPress. (C:\xampp\htdocs\wordpress) and find a file called, “wp-config-sample.php” and rename it to “wp-config.php”
  • Open it using your, default text editor.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Find this section
  1. /** The name of the database for WordPress */
  2. define( 'DB_NAME', 'database_name_here' );
  3. /** MySQL database username */
  4. define( 'DB_USER', 'username_here' );
  5. /** MySQL database password */
  6. define( 'DB_PASSWORD', 'password_here' );
  7. /** MySQL hostname */
  8. define( 'DB_HOST', 'localhost' );
  • Change it like below and save changes.
  1. /** The name of the database for WordPress */
  2. define( 'DB_NAME', wpdb2019' );
  3. /** MySQL database username */
  4. define( 'DB_USER', 'root' );
  5. /** MySQL database password */
  6. define( 'DB_PASSWORD', '' );
  7. /** MySQL hostname */
  8. define( 'DB_HOST', 'localhost' );



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
  • Select a language and press Continue.

  • After installation complete, we need to fill our site information. (Don’t worry, you can change these settings anytime)



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
Site title – ‘Demo Site”
Username – “admin”
Password – “techie!@#”
Your Email –
demo@techieupgrader.in
Done, Step 4 Completed. It’s time to log in

Step 5 – WordPress Admin Control Panel.

Open a web browser and type http://localhost/wordpress/wp-admin/ it will redirect you to the WordPress admin login page.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot
Enter your credentials.
Username – admin
Password – techie!@#
This is WordPress Admin control panel.



CtechF - How to create WordPress blog using xampp (Localy) - Screenshot

 

Wednesday, 29 May 2019

Build Your Own Video Sharing Website LikeYouTube

Hi guys! I'm back with a new article  of how to build a video sharing website like youtube
 we will discuss about YouTube launched in 2005, no one could have imagined that it would become such a successful website. Today, YouTube is the #3 website in the world pulling in over 1 billion visitors each month...that's a lot of people. One of the biggest reasons why YouTube became so popular is because video is the most powerful way to present anything.
  Here are some amazing stats about YouTube:

More than 1 billion unique users visit YouTube each month
    Over 6 billion hours of video are watched each month on YouTube—that's almost an hour for every person on Earth
    100 hours of video are uploaded to YouTube every minute
    80% of YouTube traffic comes from outside the US
    YouTube is localized in 61 countries and across 61 languages
    According to Nielsen, YouTube reaches more US adults ages 18-34 than any cable network
    Millions of subscriptions happen each day. The number of people subscribing daily is up more than 3x since last year, and the number of daily subscriptions is up more than 4x since last year

 What is this article about?
This article will teach you step by step how to create a website similar to YouTube. So if you've ever wanted to launch a YouTube like site, you will be able to at the end of the article.

Who is this article for?
This article is for people, organizations agencies or companies that want to build their brand by presenting amazing video content. Users will be able to upload or import their videos through their admin panel, create playlists, give thumbs up or down for videos, embed videos, and so much more.
While it's a good idea to post your videos on YouTube, it would be just as good to drive a ton of traffic by having people visit your website and watching the videos without having to go somewhere else. This is great for SEO and brand visibility. 


 Monetizing Your Site
You will learn how to monetize your site with Google Adsense or banners simply by inserting your codes in whatever position you want to show ads. This will give you complete control over what ads show on your website.

Website and Video Optimization
This article will teach you how to optimize your site, menus, videos, and content pages. This will increase your visibility on search engines like Google, Bing and Yahoo!. 

Your website will have the following features:

video upload

video thumbnail generation

server side video conversion

full video player

likes + dislikes on videos

full comment system with likes/dislikes, replies etc.

video details editing

account creation

Easy-to-use interface inspired by YouTube

Front-end management for user and admin

Social media sharing (Facebook, Twitter, Google+, Email)

and much  more!

   Coming Soon

Tuesday, 9 April 2019

CodeIgniter V/S CakePHP

CodeIgniter

CodeIgniter being an original PHP framework with MVC structure is very easy to download and install. You can download it either from CI’s Homepage or from the GitHub. Default ORM that CodeIgniter uses is the Data Mapper ORM and the default template engine used is CodeIgniter’s own custom engine.
Some of the Pros of CodeIgniter are listed below:      
  • Compact size: CodeIgniter comes in just 3MB size including the user manual saving your memory space.
  • Permits caching: CodeIgniter allows the web pages to carry out caching in order to reduce the total load time and increase its efficiency and overall performance.
  • No odds of bugs being overlooked: There are hundreds and thousands of developers who have been testing CI so it is quite impossible that any bugs could have been overlooked. Besides this, if any new version of CI is out, it is thoroughly tested for bugs and is solved like a flash.
  • Popularity: CI’s usability graph has been affected minutely by Laravel. Nonetheless, CI has majorly remained stabled the whole time.
  • Built-in Libraries: CI provides a lot of built-in libraries and user handy guide which helps you in understanding CodeIgniter Development and its Services.
CodeIgniter also comes with a few Cons listed below:
  • No Unit Testing: Mostly Integration testing is carried out in CodeIgniter Development. There isn’t any particular restriction for using unit testing unless the code under testing is fully separated from CI. This makes the testing obscure.
  • Extending core files: For a couple of features like namespaces, modular separation by default and for procedural function helpers you need to extend the “core files” which is a wastage of time and efforts both. Additionally, it requires flourished knowledge of both PHP and CodeIgniter.
CodeIgniter Development Services are widely popular and are used immensely by PHP Developers. Currently CI works on the version 3.1.8 The future Version 4 is still under development.

CakePHP

CakePHP framework was modeled on Ruby on Rails. It did come before CodeIgniter (in 2005) but, its usability graph has been constantly decreasing since 2009. CakePHP uses Default ORM (Object Relational Mapping) and CakePHP Template.
Pros of CakePHP:
  • Easy to setup: There are no complicated XML and YAML files which makes it very easy to setup the database.
  • Duration: CakePHP takes lesser time than CodeIgniter in developing as well as templating.
  • Resources: There are plenty of tutorials available on internet for user’s guidance.
  • Vendor Libraries: As CakePHP comes with composer it is very easy to add vendor libraries.
Cons of CakePHP:
  • Database: CakePHP uses Relational DB: Oracle. In order to use MySQL you need to get third party libraries.
  • Routing and API: API integration and Cake Routing is immensely difficult due to which huge number of users eschew themselves.
  • CakePHP is more bulging and slow.
CakePHP in comparison to CodeIgniter has a lower usage ratio. Current version available is 3.5.0 CakePHP has recently released the version 3.6.0-RC. It will be tested for few more weeks and if no major bug is found in couple of weeks, it will then be a stable release CakePHP 3.6.0

Conclusion:

CodeIgniter and CakePHP both are conventional frameworks. Each has its own pros and cons. If you are looking for quick development of your web application you must go for CakePHP but, if you have pretty good time and wish to focus more on size, quality, and zero or less bugs, you must definitely choose CodeIgniter. However, if you are unsure about your requirements you can always opt for Expert Consultation about which among all PHP frameworks is best to use as per your requirement. Hire Expert Developer and they will never disappoint you in making fruitful suggestion.

Thursday, 4 April 2019

comparison between nodejs and php

PHP is not going to disappear immediately, but its positions are undermined even further by the nascent Node.js.
When the Internet exploded in the 2000s, PHP was a thing all the cool kids did. It was extremely revolutionary, because:
  • It was an interpreted language unlike C++ or Java which require the source code compilation
  • It had the ability to be used directly with HTML by mixing within its template files with a <%php ... %> markup tags
  • It had cheap shared hosting providers on Apache servers with a Linux, Apache, MySQL and PHP (LAMP) stack
  • It had a functional nature which is easier to learn than the object-oriented programming
Over the years, PHP and its apps became a monstrous technology vulnerable to security threats (e.g., SQL injections), lack of a centralized packaging registry (was Composer inspired by Node Package Manager?),inconsistent API and subpar performance. There are many better alternatives to PHP, e.g., Ruby on Rails and Django, however nothing is as approachable as Node.js.
For those of you who aren’t familiar with Node.js, or who have heard of it but can’t quite grasp the concept, here is my analogy:
Node.js is functionally similar to the PHP + Apache or ASP + IIS stacks.
Nowadays, Node.js is gaining momentum. The platform uses JavaScript. It’s functional, and its non-blocking I/O mechanism allows for a better performance. Node.js comes with a robust Node Package Manager solution and the specification, i.e., ECMAScript.
Because Node.js is a lower-level technology, it is not comparable to complex frameworks like Struts, Rails or Django directly.
Therefore, many people, whether software engineers or entrepreneurs, are often faced with the decision of “What tech stack to use” In this article PHP vs. Node.js, we’ll compare apples-to-apples approaching the question from different angles, such as:
  • Syntax
  • Context switch
  • Modules
  • Ecosystem
  • Frameworks
  • Real-time apps
  • Database apps
  • Third-party services apps
  • Web servers
  • Hosting
  • Performance

Syntax

Both platforms have access to the command line interface via $ php -i and$ node.
This snippet prints ‘Hello World’ in PHP:
1echo 'Hello World'; 
This will output the same phrase in Node.js:
1console.log('Hello World');
Note: In JavaScript semi-colons are optional except when inside of the forloops and before immediately-invoked function expressions (IIFE).
Sleep function script example in PHP:
1234echo "a"."\n";
sleep(2);
echo "b"."\n";
echo "c"."\n";
The above code will output:
1a
And then after a 2 second delay:
12b
c
If we try to re-write the code in Node.js:
12345console.log('a')
setTimeout(function() {
  console.log('b')
 },2000)
console.log('c')
This snippet will print:
12a
c
And with a 2 second delay, it will print:
1b
Note: In JavaScript, console.log() automatically adds the end of line symbol.
The for loop in PHP might look like this:
123for ($i = 1; $i <= 10; $i++) { 
  echo $i;
} 
They’re strikingly similar in Node.js:
123for (var i = 0; i <= 10; i++) { 
  console.log(i);
} 
To create an array in PHP:
1234$users = array( 
  array('name' => 'John', 'id' => 3940), 
  array('name' => 'Peter', 'id' => 8904) 
); 
To create an array in Node.js:
1234var users = [ 
  { name: 'John', id: 3940 }, 
  { name: 'Peter', id: 8904 } 
] 
To iterate through an array in PHP:
123for($i = 0; $i < count($users); ++$i) { 
  $users[$i]['id'] = mt_rand(000000, 999999); 
} 
To iterate through an array in Node.js:
123for (var i; i < arr.length; i++) {
    users[i] = Math.floor(Math.random()*1000000);
} 
Or in a functional manner:
123users.forEach(function(user, i){ 
  users[i] = Math.floor(Math.random()*1000000); 
}) 
To declare a function in PHP:
1234function hello($name) {
  echo "Hi ".$name;
}
hello("Peter"); //outputs Hi Peter
To declare a function in Node.js:
1234function hello(name) {
  console.log('Hi' + name);
}
hello('Peter'); //outputs Hi Peter
To declare a new object in PHP:
12345678class foo {
    function do_foo()  {
        echo "Doing foo."; 
    }
}

$bar = new foo;
$bar->do_foo();
To declare a new object in Node.js:
12345678var foo = function () {
  return { 
    do_foo: function () {console.log('Doing foo');}
  };
};

var bar = foo();
bar.do_foo();
Note: there are no classes in Node.js/JavaScript, because objects inherit directly from other objects (prototypal inheritance). There are many instantiating patterns such as pseudo-classical, functional(above) andclassical.
A database snippet with the PDO database connection library in PHP:
1234$pdo = new PDO('sqlite:users.db');
$stmt = $pdo->prepare('SELECT name FROM users WHERE id = :id');
$stmt->bindParam(':id', $_GET['id'], PDO::PARAM_INT); //<-- Automatically sanitized by PDO
$stmt->execute();
A Node.js database script with the Mongoskin MongoDB library:
123456//assuming we use Connect/Express middleware for req.query
var db = require('mongoskin').db('localhost:27017/db'); 
db.collection('users').find({_id: req.query.id}).toArray(function(err, results) {
    if (err) throw err;
    console.log(results);
});

Context Switch

The Switch between different environments and languages is attributed to the drop of efficiency when writing software code. Many researches and personal anecdotal observations show that interruption negatively impacts programmers’ performance. With less languages to learn and remember the flow is smoother and the code is better! For a deeper articles on this subject you might want to take a look at Human Task Switches Considered Harmful and The Multi-Tasking Myth.

PHP

With the LAMP stack, i.e, Linux, Apache, MySQL and PHP, developers must master at least two more languages which are PHP and SQL in addition to the mandatory and omnipresent HTML, CSS and JavaScript.

Node.js

Node.js is brilliant at having less context switches, because together with MongoDB, this stack can operate only in one language: JavaScript!
An example of MongoDB shell commands (called by $ mongo):
123> db.users.find({});
> db.users.insert({name: 'Azat', email: 'azat@rpjs.co'})
> db.users.update({name:'Azat'},{$set:{email:'hi@rpjs.co'}})

Modules

PHP

There is PEAR, a veteran system which installs packages on a server globally, and a better alternative Composer.
In other cases, developers had to seek modules — or components as they call them — on various websites, and to administer them manually by placing *.php files into sub-folders of their projects. Unfortunately, all this is not very kosher.

Node.js

Node.js comes with a superior and dependable package management system called NPM and its registry npmjs.org which is easy to use and publish. Everything is administered via the package.json file and versioned locally, unless we’re installing a CLI tool with the -g option.
Both PHP and Node.js are functional languages with a relatively later addition of OOP to PHP.

Ecosystem

PHP

This is probably one of the most important areas where PHP still beats Node.js. There are amazing open-source applications, e.g., WordPress, tons of free scripts, quality tools and books.

Node.js

Node.js is growing faster than any other platform/language. This is mostly due to the philosophy of keeping modules minimal and performing only a small set of tasks. Other factors might include such things as:
  • The gigantic popularity of front-end JavaScript among web developers
  • Existence of the specs, and abundance of JavaScript resources and gurus (such as Doug Crockford) amassed during the language’s many years of existence
  • Collaborative GitHub open-source community based on an awesome distributed version control system that didn’t exist before
  • Ease of NPM use, e.g., to publish an NPM module run $ npm publish
As a result, some people predict that Node.js will surpass other languages in the absolute number of contributions.

Frameworks

It’s important to have rich tools and proven libraries at our disposal.

PHP

CakePHP and Zend come to mind, and for more choices there is anextensive list.

Node.js

Playing field is relatively leveled with Express.js being the most popular choice, and the full-stack MVC frameworks Meteor and Derby showing the way to the future.

Real-time apps

PHP

For PHP, there is still Node.js dependent Elephant.io and some other approaches. The problem with native PHP and websockets is that Apache and ISS — where PHP is usually run as a module — weren’t really built with persistent connection in mind. Therefore, developers have to use the standalone processes like: Apache WebSocket or Ratchet.

Node.js

Real-time apps building is just a breeze with Node.js stack of the Socket.IOlibrary, Express.js framework and Handlebars reactive template engine. In the Meteor and Derby projects, real-time apps building is taken one step further by combining front and back-end code bases with the persistence layer which reduces the complexity and speeds up the development dramatically.

Database apps

PHP

PHP has a long and fruitful history with traditional/relational databases like MySQL, hence the name of the stack LAMP — Linux, Apache, MySQL and PHP.

Node.js

Node.js is natural with NoSQL databases like MongoDB.
The databases’ performances are somewhat comparable to each other depending on the use cases as per MySql vs MongoDB performance benchmark(MySQL), Simple Test : MongoDB vs MySQL(MongoDB) andMongoDb vs MySql – Fight!!!(MongoDB) articles. However, MongoDB is superior for distributed databases and is highly scalable. The added bonus is that without a fixed schema, NoSQL databases are perfect for cloud computing, prototyping and agile projects.

Third-party services apps

PHP

As is the case with many traditional languages, PHP’s flow is blocked ’til the remote server has responded, hence the need for multi-threading.
Note: Some languages provide this feature when special libraries/frameworks such as EventMachine for Ruby or Twisted for Python are used. However, they’re very complex and weren’t built from the ground up with the platform.

Node.js

On the contrary, due to a non-blocking I/O, Node.js can handle multiple requests and make multiple requests as a client to a third-party services (e.g., Twitter, Amazon) with just one thread of execution.

Web Servers

PHP

Since PHP 5.4 and higher, there is a build-in development server that we can started with:
1$ php -S localhost:8000
Assuming we have index.php in that folder:
123<?php
  echo 'Hello World';
?>
For versions prior to 5.4, there are ‘all-in-one’ tools like MAMP and XAMPP.
As for the production environment, PHP can’t be run on its own. One of the most popular technologies used with PHP are Apache and nginx where PHP is just a module of Apache web server. My personal experience of Apache is that it has a steep learning curve and while being very configurable, by default those configurations are prone to security leaks.

Node.js

Node.js was created from the ground up for the network applications and there is a set of core modules to write web servers.
To start a Node.js server:
1$ node .
Assuming our index.js file in this folder has:
123456var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
In production, Node.js can be run on SmartOS or Linux (like Ubuntu) as a service.
Note: Multi-threading is absolutely possible in Node.js with clusters and/or external modules.

Hosting

PHP

PHP owes its popularity mainly to the ease and cheapness of offered shared hosting solutions. True, it’s hard to find one without the LAMP stack on it. This commoditization sometimes leads to security holes and less than acceptable downtime due to hosting providers overselling and other consumers using malicious code.
Platform as a Service is a better alternative and somewhere in between full fledged dedicated server and shared hosting. Most of PaaS providers support PHP right of the bat.

Node.js

Node.js works nicely on PaaSs, with Heroku and Nodjitsu leading the list. Also, the cloud infrastructure company Joyent (the maintainer of Node.js), developed powerful operation system SmartOS that allows for performance bursts, painless deployment and DTrace debugging.

Performance

It’s needless to say that performance is important. This resource shows different benchmark tests: Which programs are fastest?.

PHP

PHP is relatively fast but due to its bottleneck in the file system, database and third-party requests, it fails miserably in comparison with Node.js and its super fast Goolge Chrome V8 engine.
For example, when Facebook reached its scalability limits with PHP, they wrote an extremely fast C++ library and virtual machine which they calledHipHop VM, but kept the PHP API.

Node.js

Node.js is extremely fast due to its non-blocking I/O mechanism and Google Chrome V8 engine technology. I even heard that Joyent started re-writing some of their C++ modules in Node.js.

Conclusion

PHP was an outstanding technology in its days. Its success and popularity came from:
  • Its ease of learning and use
  • cheap and straightforward hosting mostly shared LAMP
  • Abundance of open-source scripts, apps and libraries
At the same time, these same things now led to its dusk. The contributions to the core from beginner programmers metamorphosed API inconsistently while the lack of OOP/classes and module management systems inhibited open-source community growth. Absence of a leading framework (Ruby on Rails comes to mind as an example of a single dominance) or a paradigm that also helped to produce a lot of bad code that relied heavily on mixing PHP and HTML code without any MVC-ishness. On the other hand, there are a lot of good products and infrastructure for PHP that are here to stay.
Node.js is relatively young with only three years since its first commit, but it’s already the fastest growing platform by the pace of contributions (the absolute number will surpass other languages in a few years). The fact that JavaScript language is the most popular language in the world and has the biggest run-time internment of course attributed to that. Many tools are ported to Node.js with small or no modification from the browser environment. Also, great books on JavaScript fundamentals (for example,JavaScript: The Good Parts and Eloquent JavaScript) experienced surge in the popularity again.
Node.js is very efficient and great for building real time, NoSQL oriented and scalable systems.

Disclaimer

I worked with many technologies including Ruby on Rails, Python, Java/J2EE, VB, ASP, Perl and of course PHP. One of my most complex PHP projects was openList.co which involved use of the MVC pattern with template engines, classes, database abstraction layer and .htaccess re-routing. However, my focus during the past couple of years has been dedicated solely to Node.js and front-end JavaScript frameworks like Backbone.js. So my opinion might be biased, please comment on your experience with real projects in both PHP and Node.js.
If you want to learn more about Node.js take a look at my artisanal bookRapid Prototyping with JS: Agile JavaScript Development, premium online training Node Program (Udemy link) and the astonishing coding intensive full-time course at HackReactor.