Nasrul Hazim Bin Mohamad

Laravel: Import Templates into Laravel

Apr
27

Assalamualaikum,

We know, there’s millions of web templates available out there – the clean look, corporate look, modern, minimalist. You name it, either it is free or paid version, usually it come in HTML, JS and CSS format. It’s hard to find template that is ready with Laravel.

Previously, here are some of the approaches I did, to get the template into Laravel application.

  1. Download the template, copy the assets, organise them in public directory. That’s ok, but I need a way to keep everything in resources/assets.
  2. Download the template, mimic / copy the important part of the template – CSS / JavaScript – place it in resources/assets and start writing codes for front-end assets, then compile using Laravel Mix.
  3. Get the list of dependencies used for the theme, manually install using yarn add..., then create scripts – CSS / JavaScripts – in resources/assets, then compile using Laravel Mix.

All these some of my previous approaches in importing templates into Laravel application.

Yesterday, I have a chance experimenting on new method. Here the workflow:

  1. Clone / Download the template into resources/assets/templates/
  2. In terminal, go into resources/assets/templates/the-template/, run npm install && npm run build – depending on your template selection, sometimes it is required to compile the template, but there is templates that did not require you to compile.
  3. Then in webpack.mix.js, copy all assets generated in resources/assets/templates/the-template/ to public/the-template.

Then you are done! You can start use the asset() helper like asset('the-template/js/vendor.js'), and so on in your layouts.

Following an example of the templates I have compile and export to public folders – but I did not implement in the new layout, as it require a lot of efforts to create components and use all the classes from the template.

Template Into Laravel

Hope my explanation will make you guys clear, how to import templates into Laravel projects – 3 main steps: git clone, build(optional), copy compiled assets with mix to public directory.

Thanks!

Training: Mobile Apps Development with Ionic Framework – Batch 1

Apr
10

Registration Open Now!

Please register at Mobile Apps Development with Ionic Framework

Course Details

Date: 24th April 2016

Location: http://bit.ly/cc-training-location

Fee: RM 100

Syllabus Details

Introduction

Level 0
Installation
– NodeJS: https://nodejs.org/en/ (need to be done before coming to the class)
– Ionic: Just run step 1 at http://ionicframework.com/getting-started/ (need to be done before coming to the class)

Level 1
Ionic Creator
– Sign Up (need to be done before coming to the class)
– Creating Project
– Export Project

Level 2
Development
– Using Google Chrome Developer Tools
– app.js
– route.js
– controller.js
– Templates

Level 3
– ngCordova (Geo Location & Camera)
– services.js (Factory & Service)

Level 4
– Preview App on Device using Ionic View app (need to be done before coming to the class)

Bootstrap Studio: 2.0.0 Review

Jan
26
Bootstrap Studio 2.0.0

Bootstrap Studio 2.0.0

 

Bootstrap Studio 2.0.0 has been released. New features have been added – as per screen shot below.

So, I’ve tested some of the new features – multiple CSS, pages and JavaScript. I’m trying to use Animate.css & WOW.js.

Here my review:

  1. PAGES – The pages are working great! with Duplicate features, that’s awesome! Except one thing – if one of your menu(for example) change, you need to update all the pages – workaround make sure you use custom components so that you can pull / push any changes to the component.
  2. STYLES – as what it mentioned – yes you can have multiple CSS! But I’m looking for to be able to import external CSS perfectly(currently I just copy-paste the animate.css, but it’s not working – have to export & update my animate.css)
  3. JavaScript – Again, importing JavaScript will be good(currently I’m copy-paste the WOW.js into new JavaScript) and the scripts is in alphabetical order! I hope I can manage my JavaScript position.

Below are some screenshots of the new Bootstrap Studio 2.0.0 and here the demo (with a little tweak to ensure animate.css & WOW.js are working) 🙂

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Pages

Bootstrap Studio 2.0.0: Pages

System Development: Must Have 3rd Party Library

Dec
22

A list of useful libraries used for system development – such as uploading, sorting, beautiful alert messages.

So, you don’t have to stick to those old schools methods for all the above. 🙂

ply

Ply, beautiful alert messages and even you can customize for login or registration modal.

DropzoneJS, similar to WordPress uploading Media.

DropzoneJS, similar to WordPress uploading Media.

sortable

Sortable, useful when it’s come to sort out your staff list for instance, or probably you have a list of products need to be sort.

Slide in Elements

Dec
17

CSS

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

jQuery

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

Reference: Bootstrap Theme “Company”

JavaScript: JSON

Nov
17

JSON, number of references for beginners, shared by one of my student during training in INTIM, Kemaman.

blog-json

blog-json

Bootstrap Studio: Demos

Oct
26

Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.

Carousel

Carousel

Columns Sizing

Columns Sizing

Options for Columns

Options for Columns

CSS Panel

Similar to Chrome Developer Tools CSS Panel

For Dekstop

For Dekstop

The Files

The Files

The Files

The Files

For Desktop

For Desktop

For Mobile

For Mobile

Source Code

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

  1. Carousel (component available in BS 1.0.9)
  2. Simple Login

Here are the summary from my experience using Bootstrap Studio:

      Reducing time spent for front-end development
      Doing two job at one time – design & write codes
      Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

jQuery Mobile: Set Selected Item for jQM Select

Jul
31

There’s a minor different how to set selected item in drop down list in jQuery Mobile. We can’t set by using standard jQuery $().val(value);. Here the workaround

$("#selector option[value='your-value']").attr('selected', 'selected');  
$('#selector').selectmenu('refresh');

Reference: Is there a way to set the selected value in JQM select?

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete

May
27

Referring to my earlier post jQuery: Show Loading…, a better way to show & hide loading icon – by binding to ajaxSend and ajaxComplete event.

The Html Markup

 <div id="loading" class="overlay-loading">
    <i class="loading-icon fa fa-5x fa-circle-o-notch fa-spin"></i>
 </div>

The CSS

.overlay-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 2000;
}
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
}

The JavaScript

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

References:

  1. Ajax Events
  2. JsFiddle
  3. FontAwesome