US ZIP Validation using jQuery

HTML

  1. <input type="text" class="us_zip" />

jQuery

  1. $(document).ready(function(){
  2. 	$('body').on('blur','.us_zip',function(){
  3. 		$(this).val(IsValidZipCode($(this).val()));
  4. 	});
  5. 	$('body').on('keyup','.us_zip',function(event){
  6. 		event = event || window.event;
  7. 		if((event.which>95 && event.which<106) || (event.which>47 && event.which<58)){
  8. 			$(this).val(IsValidZipCode($(this).val()));
  9. 		}
  10. 	});
  11. });
  12.  
  13. function IsValidZipCode(zip) {
  14. 	var numbers = zip.replace(/\D/g, '');
  15. 	//var numbers = zip;
  16. 	var new_value = '';
  17. 	new_value = numbers.substr(0, 5);
  18. 	return new_value;
  19. }

 

Live Example: JSFiddle

Posted in JavaScript, JQuery by Leave a comment

US Phone Number Validation using jQuery

HTML

  1. <input type="text" class="us_phone" />

jQuery

  1. $(document).ready(function(){
  2. 	$('body').on('blur','.us_phone',function(){
  3. 		formatPhone($(this));
  4. 	});
  5. 	$('body').on('keyup','.us_phone',function(event){
  6. 		event = event || window.event;
  7. 		if((event.which>95 && event.which<106) || (event.which>47 && event.which<58)){
  8. 			formatPhone($(this));
  9. 		}
  10. 	});
  11. });
  12.  
  13.  
  14. function formatPhone(obj) {
  15.     var numbers = obj.val().replace(/\D/g, '');
  16.     var char = {0:'',3:'-',6:'-'};
  17.     var new_value = '';
  18.     for (var i = 0; i < numbers.length; i++) {		
  19. 			new_value += (char[i]||'') + numbers[i];		      
  20.     }
  21. 	new_value = new_value.substr(0, 12);
  22. 	obj.val(new_value);
  23. }

 

Live example : JSFiddle

Posted in JavaScript, JQuery by Leave a comment

Change Layout Template in Yii Framework 2

Today We are going to change the layout of a module in Yii Framework 2.

1: Go to https://almsaeedstudio.com/ or AdminLTE-2.3.0 to download the template.

2: Extract it to module_name/web/

      a: replace module_name with your module name like here my module name is backend

      b: Rename the folder as you desire. Here I renamed it to template. Now my folder directory looks like backend/web/template/

3: Go to module_name/views/layouts/

      a: Create files as per your choice like header.php, footer.php, menu.php, etc.php. Here we are going to create three files named header.php, side_bar.php, footer.php assuming that we have one file inside layouts folder named main.php. If not create one with the same name.

4: Go to module_name/web/template/ open index.html in one of your favourite text editor

      a: copy the header part code as highlighted in screenshot, and past it to header.php

Header Part of Dashboard

      b: copy the header part code as highlighted in the screenshot, and past it to side_bar.php

Sidebar of Dashboard

      c: copy the header part code as highlighted in screenshot, and past it to footer.php

Footer of Dashboard

 

 5:  Copy all content of index.html to main.php and remove those part which you already have copied and pasted it to respective files. For example remove header, side bar, footer content respectively. Now remove the main content part as highlighted below in screenshot.

Center part of Dashboard

 

6: Now prefix to css and js path this code to make the file path dynamic : 

  1. <?php echo yii\helpers\BaseUrl::base(true); ?>/template/

7: Add Yii2 code whenever necessary. For example I’m going to add some of them.

    a: 

  1. <?php $this->endBody() ?>
before closing the body tag. this will generate debugging bar for you in development environment and other things required to add it to bottom.

    b: 

  1. <?php $this->beginBody() ?>
after opening the body tag.

    c: 

  1. <?php $this->head() ?>
before closing the head tag.

    d: 

  1. <?php $this->beginPage() ?>
before any html content lik doctype tag

    e: 

  1. <?= Breadcrumbs::widget([
  2. 'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
  3. ]) ?>
at the place where you like to show breadcrumb

    f: 

  1. <?= Alert::widget() ?>
to show the alert time to time. For example when login is success, or any other alerts.

    g: 

  1. <?= $content ?>
 This is the main part of the layout where your content will appear. This should be placed at the content of step five above.

 

8: You are done. Now type URL in browser, and you’ll see new look of admin dashboard.

 

    

 

Posted in Framework, PHP, Programming, Yii Framework by Leave a comment

Change/Add virtualhost name like localhost

Follow the steps below to add/change the virtualhost name:

For Windows

  1. Go to your xampp folder: C:\xampp\apache\conf\extra
  2. Find httpd-vhosts.conf and open it with any of text editor like notepad
  3. Stop Xampp if running.
  4. Add these line first: 
    1. NameVirtualHost *:80
    2.  
    3. <VirtualHost *:80>
    4. DocumentRoot "C:/xampp/htdocs"
    5. ServerName localhost
    6. </VirtualHost>
  5. Then: 
    1. <VirtualHost *:80>
    2. 	DocumentRoot "C:/xampp/htdocs/your/website/folder"
    3. 	ServerName yourdesiredname.you
    4. 	ServerAlias www.yourdesiredname.you
    5. 	<Directory "C:/xampp/htdocs/your/website/folder">
    6. 		AllowOverride All
    7. 		Require all Granted
    8. 	</Directory>
    9. </VirtualHost>
  6. Save the file
  7. Now go to : C:\Windows\System32\drivers\etc
  8. Find for hosts
  9. make a back up of this file to anywhere on your system
  10. Now open the file with any of text editor like notepad
  11. Add these lines to the end of the file: 
    1. 127.0.0.1       localhost
    2. 127.0.0.1       www.yourdesiredname.you
  12. Save the file
  13. Restart the xampp
  14. write your chosen domain name i. e. : www.yourdesiredname.you into your browser and you are done

 

Posted in Windows, XAMPP by Leave a comment