Tag Archives: Web application

build one page app by using bootstrap working with angular.js from begginng–Part2

Since sombody is intrested in this topic, I am going to finish it now.

here it is the structure of your folder

spa_01

Her it is the index.html page:

<!DOCTYPE html>
<html lang=”en” ng-app=”CsbApp”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>AngularJS Tutorial CSB Test App</title>

<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/site.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script&gt;
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script&gt;
<![endif]–>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-route.min.js”></script&gt;
<script src=”js/app.js”></script>
</head>
<body>
<div class=”container”>
<div ng-view></div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script&gt;
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.js”></script>
</body>
</html>

then the list.html page is the patrial page will dynamic generate into the ng-view div holder:

<div class=”col-sm-6 col-md-6″ ng-repeat=”item in items” id=”{{item._id}}”>
<div class=”row”>
<div class=”col-sm-3 col-md-3″><img src=”{{item.logo.path_to_file}}” alt=”{{item.display_name}}” class=”img-responsive”></div>
<div class=”col-sm-9 col-md-9″>
<blockquote>
<p><i class=”glyphicon glyphicon-home iconstyle”></i> {{item.address.address1}}, {{item.address.suburb}}, {{item.address.postcode}}, {{item.address.state.name}}, {{item.address.country.name}}</p>
<p><i class=”glyphicon glyphicon-envelope iconstyle”></i> {{item.email}}</p>
<p><i class=”glyphicon glyphicon-phone iconstyle”></i> {{item.phone}}</p>
<p><i ng-show=”item.status==’active'” class=”glyphicon glyphicon-ok iconstyle”></i><i ng-show=”item.status!=’active'” class=”glyphicon glyphicon-remove iconstyle”></i> {{item.status}}</p>
</blockquote>
</div>
</div>
</div>

Last part is you module

var module = angular.module(“CsbApp”, [“ngRoute”]);

module.config(function ($routeProvider) {
$routeProvider.when(“/”, {
controller: “listsController”,
templateUrl: “list.html”
});

$routeProvider.otherwise({ redirectTo: “/” });
});

var listsController = [“$scope”, “$http”, function ($scope, $http) {
var self = this;
$http.defaults.headers.get={“x-device-longitude”:0,”x-device-latitude”:0};

var request = {
method:”GET”,
url:”http://api.muulla.com/app/merchant/all/10/1&#8243;
};

$http(request).success(function(response){
$scope.items=response.data;
}).error(function(errorMessage) {
console.log(errorMessage);
})

}];

Advertisements

How to use the procedure I write it in last post in your asp.net web application

In my last post I just create a store procedure to insert data into 2 tables, here is the c# code how do you use it in your project.

I write a event so for anyone need it just change you connection string then will be reuse.


protected void ButtonClick_StoreRecords(string parameterRef, string parameterLM_Booking_Ref,  string parameterLMStatus, DateTime parameterEntry_datetime)
    {
        string CS = ConfigurationManager.ConnectionStrings["youconnectionstringhere"].ConnectionString;
        using (SqlConnection con = new SqlConnection(CS))
        {
            SqlCommand cmd = new SqlCommand("spStoreLMStatusRecording", con);
            cmd.CommandType = CommandType.StoredProcedure;

            SqlParameter paramRef = new SqlParameter();
            paramRef.ParameterName = "@parameterRef";
            paramRef.Value = parameterRef;
            cmd.Parameters.Add(paramRef);

            SqlParameter paramLM_Booking_Ref = new SqlParameter();
            paramLM_Booking_Ref.ParameterName = "@parameterLM_Booking_Ref";
            paramLM_Booking_Ref.Value = parameterLM_Booking_Ref;
            cmd.Parameters.Add(paramLM_Booking_Ref);
         

            SqlParameter paramLMStatus = new SqlParameter();
            paramLMStatus.ParameterName = "@parameterLMStatus";
            paramLMStatus.Value = parameterLMStatus;
            cmd.Parameters.Add(paramLMStatus);


            SqlParameter paramEntry_datetime = new SqlParameter();
            paramEntry_datetime.ParameterName = "@parameterEntry_datetime";
            paramEntry_datetime.Value = parameterEntry_datetime;
            cmd.Parameters.Add(paramEntry_datetime);

            con.Open();
            cmd.ExecuteNonQuery();

        }
     
    }


Zend Framework2: Tutorial Part2: Hello World Module Application

The reason I start to write this post, because I read saw a lot video on youtube.com take hours to tell you how do it. And I also follow it but it is waste my time. Didn’t work for me. And I write this as my study record also hope that could help someone to start Zend Framework2.

Actually it is very simple,

First,copy the entire “Application file” and rename it to “Hello” (You could just rename the “Application” to “Hello” or any name you like, but under this file those three name must match )

HelloModuleZendFrameWork

Second, open the “Module.php”, the namespace Hello (this namespace should match your module name).

Continue reading Zend Framework2: Tutorial Part2: Hello World Module Application