12/31/2015

New* FormGenLib - My JavaScript Library to dynamically Generate HTML Forms (Built-in Support for Bootstrap_v3)

Automatically Generate awesome looking HTML form using minimal JSON options (theme Bootstrap v3)

DEMO
https://shishtpal.github.io/formgenlib/
Released Development Version
contribute to project
Or Request some feature on github

Project is under Development, API may change

Input Types

general
checkbox
file
hidden
radio
select
textarea
text
password

Special Types

List (Allow You to send a list of values)
Set (Choose just one values for a given set of values)
Photo (Upload Photo Widget)
Clearfix
Date
Heading

Form Layouts

Because we are using Underscore Templating Engine, So, We can use Global Functions inside Templates. And some properties are not defined than you can check for them with the help of this special object reference Object.

Memorize Form State

Except Input Type file , Input Fileds can Memorize its State, And to Memorize form State, we are using data-value custom attribute with each input type. And when we render or load saved form from LocalStorage, formgenlib trigger load events, that we used to load value form data-value attribute and inject into that Input Fields.
There is one toolbar to save, clean and load form states.
  • clean - clear LocalStorage
  • save - Save Current Form State to LocalStorage
  • load - Load previously saved form State
    • You can save one state for one form
    • Because we are Using form_key attribute to save Form state into LocalStorage
    • If You want to load saved state from Server (Backend)
    • Then Each Component schema should have either value or values attribute according to their schema.

Example

  • This is sample Javascript code that Generate HTML form for First Time
    • And save to localStorage
  • Next, time Form will loaded from LocalStorage
  • If You want it to re-render HTML Form
    • Then set the value LocalStorage.isClean = "false"
## Example Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var i = new GenerateForm("#form_container");
var form = {
 form_key: "thisForm",
    action: "/apis/testing",
    method: "POST",
    caption: "Testing Simple Html Form",
    id: "mygenform",
    style: "border:2px solid red;",
    schema: [
  {
      type: "heading",
      cont_grid: [12],
      label: "Simple Hello world",
      label_class: " text-center btn-warning btn-sm",
      style: "",
      control_id: "demoworld"
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Name",
   title: "Your Name?",
   name: "name",
   placeholder: "Your Name ?"
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Email",
   title: "Your Email?",
   name: "email",
   placeholder: "Your Email ?",
   autocomplete: true
  },
  {
   cont_grid: [12, 6, 4, 3],
   type: "text",
   label: "Mobile No.",
   title: "Your Mobile No?",
   name: "mobileno",
   placeholder: "Your Mobile no. ?"

  },
  {
            type: "date",
            cont_grid: [12, 6, 4, 3],
            cont_style: "",
            label: "Admission Date",
            title: "Admission Date?",
            name: "admdate",
            control_id: "admdateID",
            style: "",
            placeholder: "01/05/2014",
            value: "05/08/1992"
        },
     {
      type: "clearfix"
     },
     {
      cont_grid: [12, 6, 4],
      type: "select",
      label: "Gender",
      title: "Gender?",
      name: "gender",
      control_id: "genderID",
      items: ["00|Other", "01|Male", "02|Female"]
     },
  {
      cont_grid: [12, 6, 4],
      cont_class: "",
      cont_style: "",
      type: "photo",
      label: "Select Photo",
      title: "Your Photo",
      name: "mypic",
      control_id: "myPhoto",
      img_default: "/_assets/img/elect001.png",
      img_alt: "My Photo",
      img_style: "",
      img_id: "myphotoid",
  },
  {
      cont_grid: [12,6, 4],
      cont_class: "",
      cont_style: "",
      type: "list",
      label: "Likes ?",
      title: "What You likes?",
      name: "likes[]",
      control_id: "mylikes",
      items: ["01|Play", "02|Reading", "03|Game"],
  },
  {
   type: "clearfix"
  },
  {
   cont_grid: [12],
   type: "textarea",
   label: "About me?",
   name: "aboutme",
   control_id: "aboutmeID",
   style: "background:cyan;",
   title: "About me",
   value: "Hello World"
  },
     {
      name: "Click",
      value: "Submit",
      control_id: "formsubmit",
      control_class: "btn-primary btn-block",
      style: "",
      type: "submit"
     }
    ]
};
i.config(form);
i.injectFormCompAsNew();
i.listen();


Checkout Project on Github
Thank You.

11/24/2015

Custom Build System for PHP Scripts: Sublime3



# Sublime3 : Custom Build System for PHP

## Helps to run and debug PHP Scripts directly using Sublime3
## Note: PHP Binary ( php.exe ) should be within SYSTEM PATH
Otherwise You should edit Build System and paste absolute Path for php.exe binary

# Code 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
 "shell_cmd": "php.exe -f  \"${file}\"",
 "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
 "working_dir": "${file_path}",
 "selector": "source.php, source.php4, source.php5",

 "variants":
 [
  {
   "name": "Run with CMD",
   "shell_cmd": "start cmd.exe /k php.exe -f  \"${file}\""
  },
  {
   "name": "Run and Only Lint PHP Code",
   "shell_cmd": "start cmd.exe /k php.exe -l  \"${file}\""
  },
  {
   "name": "Start PHP Development Server",
   "shell_cmd": "start cmd.exe /k php.exe -S 127.0.0.10:8080 -t \"${file_path}\""
  },
  {
   "name": "Launch Home Page for Server (Google Chrome)",
   "shell_cmd": "start chrome http://127.0.0.10:8080"
  },
  {
   "name": "Launch Home Page for Server (Mozilla Firefox)",
   "shell_cmd": "start firefox http://127.0.0.10:8080"
  },
  {
   "name": "Launch Home Page for Server (Explorer)",
   "shell_cmd": "start http://127.0.0.10:8080"
  },
  {
   "name": "Launch Home Page for Server (MS Edge)",
   "shell_cmd": "start microsoft-edge:http://127.0.0.10:8080"
  },
  {
   "name": "Launch Home Page for Server (Internet Explorer)",
   "shell_cmd": "start iexplore http://127.0.0.10:8080"
  },
  {
   "name": "Generate Syntax Highlighted Code and Copy to Clipboard",
   "shell_cmd": "php.exe -s \"${file}\" | clip"
  }
 ]
}

# Video Tutorial




Encrypt Sensitive Information within URLs using PHP

In This blog post, we will do some tests to Encrypt and Decrypt Plain Text using PHP. This is sometimes useful, suppose you have urls like this http://www.somesite.com/users/1 and this is not safe, because your users can manipuate this to get some information that is not for them. So, What is you can change that URL into like this, http://www.somesite.com/users/iopiqowialkjsdkjdnzmnzmv This URL is more safe, all You need to do is, extract encoded string from URL and Decrypt it to get Plain Text Infomation.

Note: we are using PHP MCrypt Module





<?php 

# __identity__ : EncryptionOperations

/*
* EncryptionOperations.comp.php
* Useful Methods for Encoding and Decoding URL sensitive Information
* @methods
    public static function encryptStringBymCrypt($plaintext)
    public static function decryptStringBymCrypt($ciphertext_base64) 

*/

trait EncryptionOperations
{
 public static $salt = "bcb04b7e103a0cd8b54763051cef08bc55abe029fdebae5e1d417e2ffb2a00a3";
 /*
 * To encode URL normal text (Using  mcrypt  library)
 * @param - Plain text
 */
 public static function encryptStringBymCrypt($plaintext)
 {
  # --- ENCRYPTION ---
  # Pack data into binary string
        $key = pack('H*', self::$salt);
        # show key size use either 16, 24 or 32 byte keys for AES-128, 192
        # and 256 respectively
        $key_size =  strlen($key);

        # create a random IV to use with CBC encoding
        ## int mcrypt_get_iv_size ( string $cipher , string $mode )
        ### Returns the size of the IV belonging to a specific cipher/mode combination
        $iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_CBC);
        # string mcrypt_create_iv ( int $size [, int $source = MCRYPT_DEV_URANDOM ] )
        ## Creates an initialization vector (IV) from a random source
        $iv = mcrypt_create_iv($iv_size, MCRYPT_DEV_URANDOM);

        # creates a cipher text compatible with AES (Rijndael block size = 128)
        # to keep the text confidential 
        # only suitable for encoded input that never ends with value 00h
        ## (because of default zero padding)
        # string mcrypt_encrypt ( string $cipher , string $key , string $data , string $mode [, string $iv ] )
        ## Encrypts plaintext with given parameters
        $ciphertext = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $plaintext, MCRYPT_MODE_CBC, $iv);

        # prepend the IV for it to be available for decryption
        $ciphertext_enc = $iv . $ciphertext;
        
        # encode the resulting cipher text so it can be represented by a string
        $ciphertext_base64 = base64_encode($ciphertext_enc);
        return rawurlencode($ciphertext_base64);
    }

 /*
 * To decode URL normal text (Using  mcrypt  library)
 * @param - Base64 text string
 */
 public static function decryptStringBymCrypt($ciphertext_base64) 
 {
        # --- DECRYPTION ---
        $key = pack('H*', self::$salt);

        # show key size use either 16, 24 or 32 byte keys for AES-128, 192
        # and 256 respectively
        $key_size =  strlen($key);

        # create a random IV to use with CBC encoding
        $iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_CBC);
        $iv = mcrypt_create_iv($iv_size, MCRYPT_DEV_URANDOM);

        $ciphertext_dec = base64_decode(rawurldecode($ciphertext_base64));

        # retrieves the IV, iv_size should be created using mcrypt_get_iv_size()
        $iv_dec = substr($ciphertext_dec, 0, $iv_size);

        # retrieves the cipher text (everything except the $iv_size in the front)
        $ciphertext_dec = substr($ciphertext_dec, $iv_size);

        # may remove 00h valued characters from end of plain text
        $plaintext_dec = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $ciphertext_dec, MCRYPT_MODE_CBC, $iv_dec);
        return $plaintext_dec;
    }

    function encryptStringasHex($plaintext)
    {
        $iterations = 1000;
        $hash_length = 64;
        # Secret Key
        $secret_key = pack('H*', self::$salt);
        # Random IV for Encryption ...
        $secret_iv = mcrypt_create_iv(mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_CBC), MCRYPT_DEV_URANDOM);
        
        // $hashsha256 = hash_pbkdf2("sha256", $plaintext, $secret_iv, $iterations, $hash_length);
        $ciphertext = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $secret_key, $plaintext, MCRYPT_MODE_CBC, $secret_iv);
        $cipher_enc = $secret_iv . $ciphertext;
        return bin2hex($cipher_enc);
    }

    function decryptHexasString($encoded_string)
    {
        # Secret Key
        $secret_key = pack('H*', self::$salt);
        # Random IV for Encryption ...
        $secret_iv_size = mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_CBC);
        // $secret_iv = mcrypt_create_iv($secret_iv_size, MCRYPT_DEV_URANDOM);
        # Hex to Bin $encoded_string
        $userdata = hex2bin($encoded_string);
        # Extract $secret_iv and $secret_data from bin
        $secret_iv = substr($userdata, 0, $secret_iv_size);
        $secret_data = substr($userdata, $secret_iv_size);
        # Now Decrypt Data
        $plaintext_dec = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $secret_key, $secret_data, MCRYPT_MODE_CBC, $secret_iv);
        return $plaintext_dec;
    }

}


// # Main Test Case (11-12-2015)
class Demo
{
    use EncryptionOperations;
    function __construct()
    {
        $this->hello = "simple hello world";
    }
}



# Test case 1
$i = new Demo();
$j = $i->encryptStringBymCrypt("simple hello world and awesome work so far this is just simple and great");
$j = $i->decryptStringBymCrypt("XSDflmFYdqWJrgML6LyUTNH6zl3rEVRSxijljfayig48h1cN0r88VSuJLKMlIxRclV29yKEZ%2BNyDzyjrm5E%2FwEHB6EKPkyp6bbgkfU7GpoGuCAzrUFK18mNAubAM2ukc");
// echo $j
echo rtrim($j)



# Test Case 2
$a = new Demo();
echo Demo::encryptStringasHex("hello wold");
$b = Demo::decryptHexasString("27960504158a4c4ceeee1650ab9686027b47af826b9e69fe5fe34d33872e75d6");
echo rtrim($b);


?>


11/19/2015

Find and Replace multiline text String in HTML Files using Powershell (No Regular Expression)

Sometimes we have a bunch of text files or HTML files and all we wanted to do with them is quickly find and replace some HTML content with new HTML content, Find and Replace also works great in normal Code Editors, So that You can perform, find and replace operation.
But, Here we are talking about a bunch of files, may be 10000 or more ...
Yeah, In this situation we need to write a program to do this job, OK, Why not use PowerShell, it can do this within a few lines of code.


# Steps
  1. Generate a List of files
  2. What You are looking for ( $oldstring )
  3. Replace that with this
  4. Loop through Each and every file and write processed content to either New Location (recommended) or Overwrite existing content


 # Window PowerShell Code

# Generating a List of Files
$filelist = ls -Filter *.html -Recurse

#case - 1 
# What You are looking for ... 
$old = "<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-19201920192102-1']);
    _gaq.push(['_setDomainName', 'helloworld.com']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>"
# Now find and replace all NewLine Characters with a Space Character 
# Note: This will make you code UGLY, but You can make beautify again some tools like (Tidy)
# Or You can do this Simple trick...
# # Here we are replacing NEWLINE character with a space character, but You can replace NEWLINE Character with 
# # Your custom code template and When You are done, replace back Your custom code template with NEWLINE Character
# # This way You can preserve readblity of code as well...
# # Example: 
# $old = $old -replace "`r`n", " __NEWLINE__ "

$old = $old -replace "`r`n", " "
# Find $old and replace with $new
$new = " "


# Main Code to loop through each and Every File ...
$filelist.ForEach({ 
	# $old = $old -replace "`r`n", " __NEWLINE__ "
	$i = (Get-Content $_.fullname -Encoding UTF8 -Raw) -replace "`n", " "; 
	$j = $i.Replace($old, $new);
	Out-File -FilePath $_.fullname -Encoding UTF8 -InputObject $j;
})


11/12/2015

Associate Some Type of File with Some Program (Windows)


Did You even notice that when you double click some file in Windows Explorer, Some program will open that file for you. How does Explorer remember that THIS Type of file should be opened with THIS Program. So, This behavior is managed by File Type Association Record, and THIS record is saved in Windows Registry. OK, Now we will take a look at all Possible way to associate some kind of file with some program.

Some Kind or Type of File only refers to File Extension, By Default, in Windows You will not be able to see file extension, But i am assuming You are familiar with Media Files, like Audio and Video Files, and You may know that mp3 files, means File Extension is .mp3 So, for example, sample_media_file.mp3 (File Extension is .mp3) and some video file, like sample_media_file.mp4 (File Extension is .mp4), sample_media_file.mkv

Method 1 (Manual Method)

  • We want to change program to open .mp4 files.
  • Right Click on File and in Context menu click, Properties
  • Now in Properties -> General Tab Click Change Button
  • New windows appears asking you to choose any program from list, If Program that you are looking for, is not in list, then you manually locate that program.
  • After choosing/Selecting THAT program, Click Apply button and then OK Button
Note:
  1. This Method Generate File Type Association Registry only for Current User. You can look at Generated Registry using regedit.exe
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts.mp4
  1. Command line that will be Executed when you Double click on some .mp4 file. program.exe %1

Method 2 (Using Command Line)

  • In this Method we will be using two command line programs (ASSOC and FTYPE)
  • Lets take a look at assoc program help
C:\Windows\system32>assoc /?
Displays or modifies file extension associations

ASSOC [.ext[=[fileType]]]

.ext      Specifies the file extension to associate the file type with
fileType  Specifies the file type to associate with the file extension

Type ASSOC without parameters to display the current file associations.
If ASSOC is invoked with just a file extension, it displays the current
file association for that file extension.  Specify nothing for the file
type and the command will delete the association for the file extension.
  • We want to declare all files with .mp4 extension as MediaFile
assoc .mp4=MediaFile
  • Now take a look at ftype program help
C:\Windows\system32>ftype /?
Displays or modifies file types used in file extension associations

FTYPE [fileType[=[openCommandString]]]

fileType  Specifies the file type to examine or change
openCommandString Specifies the open command to use when launching files
of this type.

Type FTYPE without parameters to display the current file types that
have open command strings defined.  FTYPE is invoked with just a file
type, it displays the current open command string for that file type.
Specify nothing for the open command string and the FTYPE command will
delete the open command string for the file type.  Within an open
command string %0 or %1 are substituted with the file name being
launched through the assocation.  %* gets all the parameters and %2
gets the 1st parameter, %3 the second, etc.  %~n gets all the remaining
parameters starting with the nth parameter, where n may be between 2 and 9,
inclusive.  For example:

ASSOC .pl=PerlScript
FTYPE PerlScript=perl.exe %1 %*

would allow you to invoke a Perl script as follows:

script.pl 1 2 3

If you want to eliminate the need to type the extensions, then do the
following:

set PATHEXT=.pl;%PATHEXT%

and the script could be invoked as follows:

script 1 2 3
  • Now we need to define command line that should be executed every time User Double Click on .mp4 Files.
ftype MediaFile="C:\Program Files\MPV_Player\mpv.exe" "%1"
  • Equivalent Registry generated because of these two Commands ( assoc and ftype )
----------------------------------
Keys added:5
----------------------------------
HKLM\SOFTWARE\Classes\.mp4
HKLM\SOFTWARE\Classes\MediaFile
HKLM\SOFTWARE\Classes\MediaFile\Shell
HKLM\SOFTWARE\Classes\MediaFile\Shell\Open
HKLM\SOFTWARE\Classes\MediaFile\Shell\Open\Command

----------------------------------
Values added:2
----------------------------------
HKLM\SOFTWARE\Classes\.mp4\: "MediaFile"
HKLM\SOFTWARE\Classes\MediaFile\Shell\Open\Command\: "C:\Program Files\MPV_Player\mpv.exe" "%1"

Method 3 (Using PowerShell)

  • Windows PowerShell is really cool, because this allows you to work with Windows Registry the same way as you work with FileSystem.
cd HKLM:
New-Item .\SOFTWARE\Classes\.001 -Value "first"
New-Item .\SOFTWARE\Classes\first
New-Item .\SOFTWARE\Classes\first\shell
New-Item .\SOFTWARE\Classes\first\shell\open
New-Item .\SOFTWARE\Classes\first\shell\open\command -Value '"mpv.exe" "%1"'

General Method (Add/Modify Both Global as well as Local Registry)


WHY?

To associate some type of files with some program, all You need to do is run the following command. assoc ftype
But if User choose some program manually, then Explorer create a list of program with first index for previously chosen User Program, This is why in this case, First You need to execute both above commands after that You have to add THIS application to User Chosen Programs and Update Index.
Now, When User Double click on THAT kind of File, Explorer will give him/her a choice that Hey! I found this New Program, That may be chosen by You, But The second one will be what You chosen last time.


Command Line Method

@rem -- setup a new application and path for application
REG ADD "HKEY_CLASSES_ROOT\Applications\mpv.exe\shell\open\command" /v @ /t REG_SZ /d "\"F:\Softwares\mpv\mpv.exe\"  --autofit=50%% --force-window --ontop --no-border \"%%1\"" /f
@rem -- register THIS file type to use THAT application
REG ADD "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.mp4" /v "Application" /t REG_SZ /d "mpv.exe" /f
REG ADD "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.mp4\OpenWithList" /v "g" /t REG_SZ /d "mpv.exe" /f
REG ADD "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.mkv\OpenWithList" /v "MRUList" /t REG_SZ /d "gabcdef" /f

assoc .mp4=MediaFile
ftype MediaFile="F:\Softwares\mpv\mpv.exe" --autofit=50%%%% --force-window --ontop --no-border "%%1"

PowerShell Method

# Register a New Application (demo.exe) and command line string for it ..
cd HKLM:\SOFTWARE\Classes\Applications\
New-Item demo.exe
New-Item demo.exe/shell
New-Item demo.exe/shell/open
New-Item demo.exe/shell/open/command -Value 'C:\demo.exe %1 --full'

# Now Associate Your Program (demo.exe) with Some File Type (Example, .001)
cd HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\
New-Item .001
cd .001
# Update OpenWith applications list
New-Item OpenWithList
Set-ItemProperty -Name g -Value demo.exe -Path OpenWithList
Set-ItemProperty -Name MRUList -Value gabcdef -Path OpenWithList

11/06/2015

Process HTML Form data, Validate it and Submit to the Server Using formlib.js - jQuery

formlib.js


My new JavaScript Library based on jQuery to Process, Validate and Submit HTML Forms





What if i tell you that, this can do the job of HTML Form Processing ( It can Validate input fields data as well as can Submit Form data to Server, When You submit the Form)

Why formlib.js

  • formlib.js is a JavaScript Library, based on jQuery.js and HTML markup is based on bootstrap.css
  • Lightweight and every parameter is Configurable
  • Can Inject Progressbar HTML markup bootstrap.css and Update it Automatically

How To Use

  • Include formlib.js into your webpage
  • Write HTML Markup (Bootstrap.css - form-horizontal class) for Your Form
  • Copy CSS Path to Form
  • Create a New Object of ProcessForm Class by passing CSS Path to Form
  • Define Configuration Object and call config method for ProcessForm Object
  • successCall is Important, actually this is a Function, that should be called when Form Successfully Processed and Submitted to the Server (Backend)
  • There is a Demo HTML file index.php that you can Download and test using PHP Server.

Download

formlib.js from github.com

Sample JavaScript Code

var i = new ProcessForm("#simpleform");
var j = {
    /* I do not want tooltips */
    "injectTooltip": false,
    /* I do not want to show BS Icons for OK and Cancel */
    "injectBSIcon": false,
    "successCall" : function(i){ console.log(i); },
    "errorCall": function(i){ console.log(i); },
    'progressbar': "#progressbar",
    'validator': {
        'name': {
            "func": 'isUserName',
            "msg": "Please, Enter a Valid User Name"
        },
        "email": {
            "func": "isValidEmail",
            "msg": "Please, Enter a Valid Email Address"
        }
    }
};
i.config(j);

Sample Bootstrap based HTML Form Code

<form action="/demo.php" class="form-horizontal0 " id="simpleform" method="POST" style="border:2px solid rgba(228, 45, 172, 0.6);">
<fieldset>
    <legend>Simple HTML Form</legend>
    <div class="form-group">
        <label for="name" class="control-label col-xs-1">Name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="first" class="control-label col-xs-1">First's</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="first">
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="form-group">
        <label for="last" class="control-label col-xs-1">Last's</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="last">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="control-label col-xs-1">Email</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="email">
        </div>          
    </div>
    <div class="clearfix"></div>
    <div class="form-group">
        <label for="file1" class="control-label col-xs-1">File1</label>
        <div class="col-xs-9">
            <input type="file" class="form-control" name="file1">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12" id="progressbar"></div>
    </div>
    <div class="form-group" style="max-width: 200px;margin: 5px auto;">
        <input id="simpleformsubmit" class="btn btn-primary btn-block" type="submit" name="Click" value="Submit">
    </div>
</fieldset>
</form> 



Formlib.js - By Shishtpal Singh

6/01/2015

How to write Thesis using LaTeX


What is LaTeX

LaTeX is a document preparation system for high-quality typesetting. It is most often used for medium-to-large technical or scientific documents but it can be used for almost any form of publishing.

LaTeX is not a word processor! Instead, LaTeX encourages authors not to worry too much about the appearance of their documents but to concentrate on getting the right content.

LaTeX Features

  1. Typesetting journal articles, technical reports, books, and slide presentations.
  2. Control over large documents containing sectioning, cross-references, tables and figures.
  3. Typesetting of complex mathematical formulas.
  4. Advanced typesetting of mathematics with AMS-LaTeX.
  5. Automatic generation of bibliographies and indexes.
  6. Multi-lingual typesetting.
  7. Inclusion of artwork, and process or spot colour.
  8. Using PostScript or Metafont fonts.

How to Download and Install LaTeX

There are different LaTeX distribution available on internet, different means what and how many LaTeX packages they have included in that distribution,

For example, Either you can Download Full LaTeX distribution (7-zip compressed, self-extracting executable, ~2GB) Or you can download just what you need, that's where MikTeX comes. (~163MB)

Software that will help you to work with LaTeX

What is Thesis?


A thesis statement declares what you believe and what you intend to prove.

A good tentative thesis will help you focus your search for information. But don't rush! You must do a lot of background reading before you know enough about a subject to identify key or essential questions. You may not know how you stand on an issue until you have examined the evidence. You will likely begin your research with a working, preliminary or tentative thesis which you will continue to refine until you are certain of where the evidence leads.

What makes a Good Thesis?

  1. It should be contestable, proposing an arguable point with which people could reasonably disagree.
  2. It tackles a subject that could be adequately covered in the format of the project assigned.
  3. It is specific and focused.
  4. It clearly asserts your own conclusion based on evidence. It is perfectly okay to change your thesis!
  5. It provides the reader with a map to guide him/her through your work.
  6. It anticipates and refutes the counter-arguments
  7. It avoids vague language (like "it seems").
  8. It avoids the first person. ("I believe," "In my opinion")
  9. It should pass the So what? or Who cares? test.

Reference1

General Document Structure for Thesis

/- Thesis Title Page
/- Declaration of Authorship
/- Favorite quote
/- Abstract
/- Acknowledgements
/- Table of Contents
/ List of Figures
/- List of Tables
/- Abbreviations
/- Physical Constants
/- Symbols
/- Dedication page
/-
/ Chapter 1 (Introduction)
    /- Section 1
    /- Section 2
/ Chapter 2 (Literature Survery / Background Theory)
/ Chapter 3 (Experimenal Setup)
/ Chapter 4 (Experiment 1)
/ Chapter 5 (Experiment 2)
/ Chapter 6 (Result and Discussion)
/ Chapter 7 (Conclusion)
/-
/- Appendix A
/- Appendix B
/- Appendix C
/- 
//- Bibliography (For Book)
//- References (For Article)

Getting Started LaTeX


Document Class

\documentclass[english]{article}
\documentclass[oneside,english]{book}
\documentclass[english]{letter}
\documentclass[english]{report}
\documentclass[a4paper, 11pt, oneside]{Thesis}   %Custom user defined document class

Page Margins Style

  1. One Column Document (Default)

     \documentclass[english]{article}
    
  2. Two Column Document

     \documentclass[twocolumn,english]{article}
    
  3. One side (Default)

  4. Two Side (Mirror Margin)
     \documentclass[twoside,english]{article}
    
  5. Two Side + Two Column
     \documentclass[twoside,twocolumn,english]{article}
    

Table Of Contents

\tableofcontents{}
% This is How you can add any page to table-of-contents list.
\addtotoc{Abstract}  % Add the "Abstract" page entry to the Contents
\addtocontents{toc}{\vspace{2em}} % Add a gap in the Contents, for aesthetics

List of Tables

% This is How you can dynamically generate list of tables.
\listoftables

List of Figures

% This is How you can dynamically generate list of figures.
\listoffigures

List of Algorithms

\listof{algorithm}{List of Algorithms}

New Page

\clearpage  %Start a new page
\newpage{}

Header and Footer

  • Header (Left)

      \lhead{}  % Clears the left side page header.
      \lhead{\emph{Contents}}  % Set the left side page header to "Contents".
      \lhead{\pagename}        % Set the left side page header to "Current Chaper Name"
      \lhead[\rm\thepage]{\fancyplain{}{\sl{\rightmark}}}
    
  • Header (Right)

      \rhead{\thepage}  % Sets the right side header to show the page number
    
      \fancyhead{}  % Clears all page headers and footers
      \pagestyle{fancy}  % use the "fancy" page style to implement the FancyHdr headers
    

Input External File This Command is useful to split your BIG document into small parts and later join them all. So, This is going to help you to write your thesis, chapterwise, (example, chapter1.tex, chapter2.tex, ... )

\input{filename}  %without Extension *.tex

Page Number

  • For Initial front matter (Use Roman style)

      \frontmatter      % Begin Roman style (i, ii, iii, iv...) page numbering
    
  • For Document Environment (Use Numerical numbers)

      \mainmatter      % Begin normal, numeric (1,2,3...) page numbering
    

Font Settings

  • Font family
      % => Roman (Default)
      \textsf{TEXT_CONTENT_HERE}  % => Sans Serif  
      \texttt{TEXT_CONTENT_HERE}  % => TypeWriter
    
  • Font Size
      {\tiny{}Simple Demo World Simple Demo World Simple Demo World }{\tiny \par}    % => Tiny
      {\scriptsize{}Simple Demo World Simple Demo World Simple Demo}    % => Smallest
      {\footnotesize{}Simple Demo World Simple Demo World Simple Demo}    % => Smaller
      {\small{}Simple Demo World Simple Demo World Simple Demo}    % => Small
      % => Normal (default)
      {\large{}Simple Demo World Simple Demo World Simple Demo}    % => Large
      {\Large{}Simple Demo World Simple Demo World Simple Demo}    % => Larger
      {\LARGE{}Simple Demo World Simple Demo World Simple Demo}    % => Largest
      {\huge{}Simple Demo World Simple Demo World Simple Demo}    % => Huge
      {\Huge{}Simple Demo World Simple Demo World Simple Demo}    % => Huger
    
  • Font Color

      \textcolor{red}{TEXT_CONTENT_HERE}
    
  • Shape

      % Upright (Default)
      \textit{TEXT_CONTENT_HERE}  % => Italic  
      \textsl{TEXT_CONTENT_HERE}  % => Slanted  
      \textsc{TEXT_CONTENT_HERE}   %=> Small Caps
    
  • Others

      %=> Bold
      \textbf{TEXT_CONTENT_HERE}
      %=> Emphasize
      \PassOptionsToPackage{normalem}{ulem}
      \usepackage{ulem}
      \emph{Simple Demo World Simple Demo World Simple Demo} 
    
      %=> Underbar
      \uline{Simple Demo World Simple Demo World Simple Demo}
      %=> Double Underbar
      \uuline{Simple Demo World Simple Demo World Simple Demo}
      %=> Wavy Underbar
      \uwave{Simple Demo World Simple Demo World Simple Demo}
    
      %=> Strike Out
      \PassOptionsToPackage{normalem}{ulem}
      \usepackage{ulem}
      \sout{Simple Demo World Simple Demo World Simple Demo}
      %=> Noun
      \newcommand{\noun}[1]{\textsc{#1}}
      \noun{Simple Demo World Simple Demo World Simple Demo}
      %=> Url / Web Links
      \url{http://www.google.com}
    

Line Spacing

  • To set custom line spacing you have to import setspace ( \usepackage{setspace} ) LaTeX package.

      %=> Single (Default)
      %=> OneHalf
      \onehalfspacing
    
      %=> Double
      \doublespacing
    
      %=> Custom Line Spacing
      \setstretch{1.2}
      \setstretch{1.3}  % It is better to have smaller font and larger line spacing than the other way round
    

Sectioning Environment Commands

\part{}  or  \part*{}  %=> Part  
\chapter{}  or  \chapter*{}  %=> Chapter  
\section{}  or  \section*{}  %=> Section  
\subsection{}  or  \subsection*{}  %=> SubSection  
\subsubsection{}  or  \subsubsection*{}  %=> SubSubSection  
\paragraph{}  or  \paragraph*{}  %=> Paragraph  
\subparagraph{}  or  \subparagraph*{}  %=> SubParagraph

Labels

Labels for any section, subsection, figure, table, paragraph are very important, because labels are usually used to make cross-references inside document. There are some rules (standards) related to, How you should use labels inside LaTeX Document. labels can be used with \ref , \eqref , \pageref Commads.

  • Using label for Figure Float

      \begin{figure}
    
          \protect\caption{demo}\label{fig:demo}
      \end{figure}
    

ref

This \ref command is used when you want to refer to some setion/figure/table/float etc. For example, You might have read in books that,

"Please, refer to figure 4.5" But in LaTeX, this figure number is automatically generated by \label command.

Please, refer to figure \ref{fig:my_first_figure}

\ref{sec:second-section}  %=>  0.2

eqref

Same as \ref Command, but output will be enclosed inside parenthesis.

\eqref{sec:second-section}  %=>  (0.2)

pageref

Its output will be page number where you label is. \pageref{sec:second-section} => 3

Here 3 is page number at which this label is embedded with that section.

Citations

To use citation, First you have to define bibitem (within thebibliography Environment) or include external bibliography file.

  • Single Citation ( \cite{key} )

          \cite{AbuOmar2013}
    
  • Multiple Citation ( \cite{key1}\cite{key2} )

          \cite{A.L.Greer1994}\cite{A.Peker1993a}
    
  • Grouped Citation ( \cite{keylist} )

          \cite{A.Peker1993a,Agarwal2006,Al-Ghamdi2011,Al-Heniti2009}
    

FootNote

Footnotes are great way to add references and definitions for any terms, page by page.

For example,

This is Demo String\footnote{This is my first text in LaTeX.}

Float

  • Algorithm Float

      \begin{algorithm}
    
      \protect\caption{First Algorithm}
      \end{algorithm}
    
  • Figure Float

      \begin{figure}
    
      \protect\caption{First Figure}
      \end{figure}
    
  • Table Float

      \begin{table}
    
      \protect\caption{First Table}
      \end{table}
    
  • Wrap Figure Float

      \begin{wrapfigure}{o}{0.5\columnwidth}%
    
      \protect\caption{First wrap figure float}
      \end{wrapfigure}%
    
  • Wrap Table Float

      \begin{wraptable}{o}{0.5\columnwidth}%
    
          \protect\caption{}
      \end{wraptable}%
    

Float Placement cases

You can combine these options in any order, if float is not at right position.

For example,

Here if Possible + Ignore LaTeX rules => [!h]

  • Top of Page (t) (Default)
  • Bottom of Page (b)
  • Page of floats (p)
  • Here if Possible (h)
  • Here definitely (H)
  • Ignore LaTeX rules (!)
  1. Span Columns

     \begin{figure*}
    
         \protect\caption{dmeo World}
     \end{figure*}
    
  2. Rotate Sideways (for Float)

    FIG:float_rotate_sideways_view.png

    Note:- You need to import rotfloat LaTeX package.

     \begin{sidewaysfigure}
         \begin{centering}
             \includegraphics[width=3in]{img/2}
             \par\end{centering}
         \begin{centering}
             \includegraphics[width=3in]{img/3}
             \par\end{centering}
         \protect\caption{First Figure}
     \end{sidewaysfigure}
    
  3. Alignment

    Left => Right => Center => Justified

    1. Using Alignment Environment For Text / table / Image or Graphics (If table/Graphics is without table/figure float)

       \begin{flushright}
           this is very first and simple paragraph
           \par
       \end{flushright}
      
       \begin{center}
           this is very first and simple paragraph
           \par
       \end{center}
      
       \begin{flushleft}
           this is very first and simple paragraph
           \par
       \end{flushleft}
      
       \begin{flushright}
           \includegraphics{img/2}
           \par
       \end{flushright}
      
       \begin{center}
           \begin{tabular}{|c|c|}
               \hline 
               1 & 2\tabularnewline
               \hline 
               \hline 
               3 & 4\tabularnewline
               \hline 
           \end{tabular}
           \par
       \end{center}
      
    2. For Graphics / Image / Table

       \begin{figure}
           \begin{raggedright}
               \includegraphics[width=3in]{img/2}
               \par\end{raggedright}
           \protect\caption{First figure}
       \end{figure}
      
       \begin{figure}
           \begin{centering}
               \includegraphics[width=3in]{img/2}
               \par\end{centering}
           \protect\caption{First figure}
       \end{figure}
      
       \begin{figure}
           \begin{raggedleft}
               \includegraphics[width=3in]{img/2}
               \par\end{raggedleft}
           \protect\caption{First figure}
       \end{figure}
      
    3. Using Alignment Commands

       \centering
       \center
       \flushright
       \flushleft
      

Figures

  • Using Figure Float

    \par Command is used to add a horizontal line space.

      \begin{figure}
      \begin{centering}
          \includegraphics[width=3in]{img/2}\includegraphics[width=3in]{img/3}
          \par
      \end{centering}
      \begin{centering}
          \includegraphics[width=3in]{img/4}\includegraphics[width=3in]{img/5}
          \par
      \end{centering}
      \protect\caption{First figure}
      \end{figure}
    
  • Subfigure (Using Figure Float)

    Insert figure float, and into figure float, insert other figure floats.

    Note:- You need to import subfig package.

    Warning:- This technique can distrub alignment of text in table of figures.

    -/ Figure_float

      -/ First Figure     -/ Second Figure
      -/ Third Figure     -/ Fourth Figure
    

    First Example,

      \begin{figure}
          \begin{centering}
              \subfloat[First Sub figure]{\protect\includegraphics[width=3in]{img/2}
    
              } \subfloat[Second Sub Figure]{\protect\includegraphics[width=3in]{img/3}
          }
          \par\end{centering}
      \begin{centering}
          \subfloat[Third Sub Figure]{\protect\includegraphics[width=3in]{img/4}
    
          } \subfloat[Fourth Sub Figure]{\protect\includegraphics[width=3in]{img/5}
      }
      \par\end{centering}
      \protect\caption{First figure}
      \end{figure}
    
  • Subfigure (Using Table)

    Insert table float, and Create a table (let 2 x 2) and put your graphics there into each column.

      \begin{table}
          \begin{centering}
              \begin{tabular}{|c|c|}
                  \hline 
                  \includegraphics[width=3in]{img/2} & \includegraphics[width=3in]{img/3}\\
                  \hline 
                  \hline 
                  \includegraphics[width=3in]{img/4} & \includegraphics[width=3in]{img/5}\\
                  \hline 
              \end{tabular}
              \par\end{centering}
          \protect\caption{Figures table}
      \end{table}
    

    Another Example, (Remove all table chrome)

      \begin{table}
          \begin{centering}
              \begin{tabular}{cc}
                  \includegraphics[width=3in]{img/2} & \includegraphics[width=3in]{img/3}\\
                  \includegraphics[width=3in]{img/4} & \includegraphics[width=3in]{img/5}\\
              \end{tabular}
              \par\end{centering}
          \protect\caption{Figures table}
      \end{table}
    

Tables

  1. Using tabbling Environment.

     %This is How You can use  tabbling  environment.
     % table of 3 x 4
     \begin{tabbing}
         \hspace{1in}\=\hspace{1.5in}\=\kill  %setup column spacing
         First \> 56 \>  78 \\  %just append a new line character after completion of column
         Second \> 45 \> 12 \\
         Third \> 15 \> 23  \\
         Fourth \> demo \> world
     \end{tabbing}
    

In This example, we have given some margin to rows (Add margin with horizontal line).

\begin{center}
\begin{tabular}{|c|c|c|}
    \hline \rule[-2ex]{0pt}{5.5ex}  First & Second & Third \\ 
    \hline \rule[-2ex]{0pt}{5.5ex} 45 & 12 & 3 \\ 
    \hline \rule[-2ex]{0pt}{5.5ex} 10 & 89 & 5 \\ 
    \hline \rule[-2ex]{0pt}{5.5ex} 56 & 2 & 58 \\ 
    \hline 
    \end{tabular}   

\end{center}
  1. Using tabular environment.

    First Example,

     % Now we are going to use   tabular   environment
     % here we want to center the content in each column using some margin
     % For that you have to use   tabularx  package.
     \begin{tabular}{|>{\centering\arraybackslash}p{1.5in}|>{\centering\arraybackslash}p{1in}|>{\centering\arraybackslash}p{1in}|>{\centering\arraybackslash}p{1in}|}
         \hline  First & Second & Third & Fourth \\ 
         \hline 1 & 2 & 3 & 4 \\ 
         \hline 5 & 6 & 7 & 8 \\ 
         \hline 9 & 10 & 11 & 12 \\ 
         \hline 13 & 14 & 15 & 16 \\ 
         \hline 
     \end{tabular}
    

    Second Example,

    multicolumn Command is used to combine multiple columns together, (there are three possible cases, Check those out using TeX Studio)

     % \multicolumn{int(How_many_columns_you_want_to_combine)}{|c|}{Column_Data}
     % \multicolumn{int(How_many_columns_you_want_to_combine)}{}{Column_Data}
     % \multicolumn{int(How_many_columns_you_want_to_combine)}{||c||}{Column_Data}
    
     \begin{tabular}{|c|c|c|}
     \hline First & Second & Third\tabularnewline
     \hline 
     \hline 1 & 2 & 3\tabularnewline
     \hline \multicolumn{2}{|c|}{Action} & 7\tabularnewline
     \hline 4 & 5 & 6\tabularnewline
     \hline 
     \end{tabular}
    

    Third Example, (How to combine multiple rows together)

     % \multirow{int(How_many_rows_to_merge)}{*}{Row_Data}
     % \cline{1-2}  => put data into 1 and 2 column only
    
     \begin{tabular}{|c|c|c|}
     \hline First & Second & Third\tabularnewline
     \hline 
     \hline 1 & 2 & \multirow{3}{*}{376}\tabularnewline
     \cline{1-2} \multicolumn{2}{|c|}{Action} & \tabularnewline
     \cline{1-2} 4 & 5 & \tabularnewline
     \hline 
     \end{tabular}
    

    Fourth Example,

     \begin{tabular}{|c|c|c|}
     \hline First & Second & Third\tabularnewline
     \hline 
     \hline 1 & 2 & \multirow{2}{*}{36}\tabularnewline
     \cline{1-2} 4 & 5 & \tabularnewline
     \hline 9 & 8 & 7\tabularnewline
     \hline 
     \end{tabular}
    

Maths

  • Inline math mode

      $ y = x^{12} + 45 $
    
  • Display Math Mode

      \[ y = x^{5} + 45*x^{3} - 12*x +23 \]
    
  • Using Numbered Equations

      \begin{equation}
           y = x^{5} + 45*x^{3} - 12*x +23 
      \end{equation}
    
  • Matrix

    First Examples,

      $\left\{ \begin{array}{cc}
      1 & 2\\
      4 & 3
      \end{array}\right\} $
    

    Second Example,

      $\begin{bmatrix}1 & 2\\
      4 & 3
      \end{bmatrix}$
    

Bibliography / References

  1. Seperate section for References
  2. Chapter wise References

Color for Citation & Color for URL & Color for Bookmarks

% Using Package  hyperref
% bookmarks=true
% bookmarksopenlevel=0
% bookmarksnumbered=true
% linkcolor={blue}
% citecolor={blue}
% urlcolor={red}
\usepackage[pdfpagemode={UseOutlines},bookmarks=true,bookmarksopen=true,bookmarksopenlevel=0,bookmarksnumbered=true,hypertexnames=false,colorlinks,linkcolor={blue},citecolor={blue},urlcolor={red},pdfstartview={FitV},unicode,breaklinks=true]{hyperref}

Document Background Color

\definecolor{page_backgroundcolor}{rgb}{0, 0.335938, 1}  %blue color
\pagecolor{page_backgroundcolor}

Using References / Bibliography

There are two methods so that you can use Bibliography into your document.

You can embed a list of your Refrences into your document.

First you need to define style (How you want to format citation) for Bibliography. After that you can initialze thebibliography Environment, and put your references there as bibitems.

\bibliographystyle{plain}    

\begin{thebibliography}{9}
    \bibitem{Law} J.~D."Lawrence, \emph{A Catalog of Special Plane Curves}, Dover Publications, New York, 1972.
    \bibitem{Law1} J.~D."Lawrence, \emph{Another Catalog of Special Plane Curves}, Dover Publications, New York, 1972.
    \bibitem{Law2} J.~D."Lawrence, \emph{Demo Special Plane Curves}, Dover Publications, New York, 1972.
\end{thebibliography}

Or, You can use a external Bibliography file, (bibLaTeX format)

You can use external Bibliography file (library.bib) and use its references inside your document, but to compile your document, there will be different steps.

pdfLaTeX COMMAND

bibtex COMMAND

pdfLaTeX COMMAND

pdfLaTeX COMMAND

\bibliographystyle{plain}    
\bibliography{library}  %This is our external bibliography file

C:\Users\ssp\Desktop\11>
=> LaTeX document.tex
This is pdfTeX, Version 3.1415926-2.5-1.40.14 (MiKTeX 2.9)
entering extended mode
(C:\Users\ssp\Desktop\11\document.tex
LaTeX2e <2011/06/27>
----- **** ----------
Output written on document.dvi (2 pages, 8572 bytes).
Transcript written on document.log.


C:\Users\ssp\Desktop\11>
=> bibtex document.aux
This is BibTeX, Version 0.99d (MiKTeX 2.9)
The top-level auxiliary file: document.aux
The style file: plain.bst
Database file #1: library.bib

C:\Users\ssp\Desktop\11>
=> LaTeX document.tex
This is pdfTeX, Version 3.1415926-2.5-1.40.14 (MiKTeX 2.9)
entering extended mode
(C:\Users\ssp\Desktop\11\document.tex
LaTeX2e <2011/06/27>
----- **** ----------
Output written on document.dvi (2 pages, 10020 bytes).
Transcript written on document.log.


C:\Users\ssp\Desktop\11>
=> LaTeX document.tex
This is pdfTeX, Version 3.1415926-2.5-1.40.14 (MiKTeX 2.9)
entering extended mode
(C:\Users\ssp\Desktop\11\document.tex
LaTeX2e <2011/06/27>
----- **** ----------
Output written on document.dvi (2 pages, 10020 bytes).
Transcript written on document.log.

General Document Structure for LaTeX Document


%-- First Section is for Document Declaration --------
\documentclass[12pt,a4paper,oneside]{book}

%-- Second Section is for Global Import-Module --------
\usepackage[english]{babel}
\usepackage{graphicx}
\usepackage{cite}
\usepackage{fancyhdr}
\usepackage{amsmath,amsfonts,amssymb,amscd,amsthm,xspace}
\usepackage[centerlast,small,sc]{caption}
\usepackage[scriptsize]{subfigure}
\usepackage{booktabs}
\usepackage{rotating}
\usepackage{listings}
\usepackage{longtable}
\usepackage{color}


%-- Third Section is for Document Settings
\usepackage[pdfpagemode={UseOutlines},bookmarks=true,bookmarksopen=true,bookmarksopenlevel=0,bookmarksnumbered=true,hypertexnames=false,colorlinks,linkcolor={blue},citecolor={blue},urlcolor={red},pdfstartview={FitV},unicode,breaklinks=true]{hyperref}


%-- Fourth Section is for Document Environment Initilization

\begin{document}

\chapter{First Chapter}    

\section{First Section}
Not so long ago, data-rich web application was an oxymoron. Today, these applications
are everywhere, and you need to know how to build them.
Traditionally, web applications left the heavy lifting of data to servers that pushed HTML
to the browser in complete page loads. The use of client-side JavaScript was limited to
improving the user experience. Now this relationship has been inverted
client applications pull raw data from the server and render it into the browser when and where it
is needed.

\definecolor{page_backgroundcolor}{rgb}{0, 0.335938, 1}  %blue color
\pagecolor{page_backgroundcolor}


\section{Second Section}
 Initially, jQuery was the go-to library for this paradigm. Its
nature was to make Ajax requests, then update text on the page and so on. However,
this pattern with jQuery revealed that we have implicit model data on the client side \cite{AbuOmar2013}.

\section{Third Section}
The rise of arbitrary code on the client side that can talk to the server however it sees
fit has meant an increase\footnote{This is about increas 1 by one.} in client-side complexity . Good architecture on the client side
has gone from an afterthought to essential?you can?t just hack together some jQuery
code and expect it to scale as your application grows \cite{A.L.Greer1994}\cite{A.Peker1993a}. Most likely, you would end up
with a nightmarish tangle\footnote{This is demo footnote.} of UI callbacks entwined with business logic, destined to be discarded by the poor soul who inherits your code \cite{A.Peker1993a,Agarwal2006,Al-Ghamdi2011,Al-Heniti2009}. \\


\definecolor{page_backgroundcolor}{rgb}{1, 1, 1}  %white color
\pagecolor{page_backgroundcolor}


\bibliographystyle{plain}    
\bibliography{library}  %This is our external bibliography file

\end{document}

Using LaTeX from Command Line


  • LaTeX

    LaTeX.exe -src -interaction=nonstopmode "document".tex (Run this command, 2 times)

    Three files will be generated,

    document.aux

    document.dvi

    document.log

    Now you can compile .DVI to .PDF file,

      C:\Users\ssp\Desktop\11>
      => dvips document.dvi
      This is dvips(k) 5.993 Copyright 2013 Radical Eye Software (www.radicaleye.com)
      ' TeX output 2015.05.27:0940' -> document.ps
      <F:/Softwares/LYX/App/MiKTeX 2.9/dvips/base/tex.pro>
      <F:/Softwares/LYX/App/MiKTeX 2.9/dvips/base/texps.pro>.
      <F:/Softwares/LYX/App/MiKTeX 2.9/fonts/type1/public/amsfonts/cm/cmr12.pfb>
      <F:/Softwares/LYX/App/MiKTeX 2.9/fonts/type1/public/amsfonts/cm/cmbx12.pfb>
      [1]
    
      C:\Users\ssp\Desktop\11>
      => ps2pdf document.ps
    
  • pdfLaTeX (To generate PDF document)

    pdfLaTeX.exe -synctex=1 -interaction=nonstopmode "document".tex ( Run this command, 2 times)

    Five files will be generated.

    document.aux

    document.log

    document.out

    document.pdf

    document.synctex.gz

  • luaLaTeX

    luaLaTeX.exe -synctex=1 -interaction=nonstopmode "document".tex (Run this command, 2 times)

  • bibtex

    bibtex "LaTeX_document.aux"

      Process started: bibtex.exe "________Project_Thesis"
    
      This is BibTeX, Version 0.99d (MiKTeX 2.9)
      The top-level auxiliary file: ________Project_Thesis.aux
    
      Process exited normally
    
  • biber

    biber.exe "LaTeX_document.tex"

Conversion between different file formats

DVI -> PS (dvips)

PS -> PDF (ps2pdf)

DVI -> PDF (dvips -> ps2pdf)

Creating a Batch file to Automate our JOB

@rem -- Here we use (pdfLaTeX + bibtex)
@rem -- USAGE:  ..\..\__init__.bat document.tex 
@echo off
SETLOCAL ENABLEDELAYEDEXPANSION

cd /d %~p1

@rem -- First run PDFLaTeX Command ( First argument will be TeX Document)
pdfLaTeX.exe -synctex=1 -interaction=nonstopmode %~n1.tex

@rem -- Now run bibtex Command
bibtex.exe %~n1.aux

pdfLaTeX.exe -synctex=1 -interaction=nonstopmode %~n1.tex 
pdfLaTeX.exe -synctex=1 -interaction=nonstopmode %~n1.tex 

@rem -- It's clean up time___
IF EXIST *.aux del %~n1.aux
IF EXIST *.bbl del %~n1.bbl
IF EXIST *.blg del %~n1.blg
IF EXIST *.lof del %~n1.lof
IF EXIST *.log del *.log
IF EXIST *.out del %~n1.out
IF EXIST *.toc del %~n1.toc
IF EXIST *.synctex.gz del %~n1.synctex.gz

LaTeX Error : Missing Package error


If you have import external package, for your LaTeX document, and when you are going to compile that document, if error returns, then you need to find that package and install that,

! LaTeX Error: File `demo.sty' not found.

Type X to quit or <RETURN> to proceed,
or enter new name. (Default extension: sty)

If after installing that package, still you are facing this error, then you have to update file list for your local LaTeX installation, and you can do that using this command.

@rem -- This is how you can update file list for LaTeX
initexmf -u 
initexmf --dump
@rem -- This is how you can look for an LaTeX packae file, that is missing.
findtexmf cite.sty

5/27/2015

Getting Started LyX : LaTeX

# Getting Started LyX

# What is LyX
LyX is a document processor, Allow you to write and structure your document using the approach (What-You-See-Is-What-You-Mean) instead of (What-You-See-Is-What-You-Get). LyX combines the power and flexibility of TeX/LaTeX with the ease of use of a graphical interface.

# Download

## Overview of LyX GUI


## LyX supports a wide range of formats that you can import into LyX workspace.
For example, it supports LaTeX Plain, Plain Text, CSV, open Office docs, ...


## LyX can also capable to export your current workspace document into different formats, for example,  LaTeX Plain, PDF, DVI, PS, HTML, Plain text


## LyX support paste data from MS Word/MS Excel.
This is very useful, this is how You can paste a table from MS Excel (or Equivalent software's) or paste a Graph from MS Excel as graphics.


## LyX allows you change font style for either a selected section of document or full document.

You can change font family, font size, font shape and there are many more options.

LyX also have paragraph setting dialog box, that can change alignment of any object(section, figure, float, table, formula, ...) in LaTeX Document.


## LyX automatically generate code for whatever you have done so far within LyX workspace.
And you can change the format to LaTeX Plain, That will work just fine with TeX Studio.


## There are number of Panels with useful functions that can be added directly into LyX workspace. 
For example, there is a Table toolbar panel, that has functions/routines that deals with tables, like adding a row, adding a column, deleting a row/column, remove table chrome, merger either multiple rows or columns and so on....


## Insert  Menu Item in LyX, has different sub-menu items.


## Special Symbols that you can directly insert into LyX workspace.


## Different Formatting options available inside LyX such as new page, horizontal space, vertical space, horizontal line etc..






## You can change currently opened document settings, for example, changing document class, font, TOC, bookmarks, list, etc...


## Changing Font Family as well as font for active document.


## Here you can change line spacing for full document.


## Changing document class style ( one column document or two column document)


## Changing Page format settings and select a pre-defined size (default: A4)


## Changing Page Layout and page style (for example, fancy , uses fancyhdr package.)
There is one more option, Two sided document (For example, Book (With Mirror Margin))


## You can also change margin for full document. (though it is defined inside the document class that you are using.)


## LaTeX Bibliography Style (plain, IEEEtran, ..)


## Use hyperref LaTeX package that enable support for Hyperlinks, Bookmarks etc..


## LyX Bookmarks settings - either you want numbered bookmarks and the level up to you want to generate bookmarks with the help of Table-Of-Contents.


## Of-course you are going to use float either for Figure, Table , and Algorithm, In each case What you want LaTeX to do when it is unable to render that Float at the location where you write code for it.


## View => Update Document and Render as PDF + View
## Update => Update Document and Render as PDF 


## LyX main Toolbar
This has One Click menus for (useful)
Spell Check
Undo / Redo
Paste Clipboard content
Insert Math Formula
Insert Graphics
Insert Table
View
Update
Insert figure Float
Insert table Float
attach label
Insert cite
Insert TeX code
Render as URL
Font Settings
Paragraph Settings
and much more ... 



## That's it for now, This is just a brief overview of LyX, But LyX is more than that.