Talent without working hard is nothing.
Android Application With SQL Server using Web Service Part 2
by

Hi, again to our second part from Android SQL server Web Service.    

After Create 2 Activities Home and log in.

will work on Login because it's our main jobs .

The design will look like this Photo :

I'm sure 100% you can do better than my design ;).

Code in XML .

Don't worry, if you can't copy the code. 

it's on My GitHub Account or First part from this tutorial. 

Eazy and simple till now.

Next Step, not that simple, in your Login Java Class. 

You need to declare and link your layout Component to you Java Code.

Same as this  Photo.

Now, 100% you will get errors in your code, because of  MyAsyncTask() Class, does not Exist, so declare it like this ,

private class MyAsyncTask extends AsyncTask<String,Void,String>
{
@Override
protected String doInBackground(String... strings) {}
protected void onPostExecute(String result) {}

}

 In the doInBackground method, will be the connection or create Connection String to your Database.

Add this code to :

protected void onPostExecute(String result) {}

 

part 3

Read more..
On
Android Application With SQL Server using Web Service Part 1
by

Hi,

In this Article will talk about SQL Server, how to connect to SQL Server Live Database.

but this time will not .NET or Microsoft Tools to read or write andy data from our database.

Today will be Android Application.

will use Android Studio 2.3.3 or Higher for this Application.

So, how to connect to SQL database, its very simple not simple same as, .NET

maybe SOAP package will make it easy. 

Our Project will be Login  Application.

will content 2 parts :

1- ASP.NET Web Service.

  Youtube Link  GitHub Project . 

In this article, I'm not going to talk about Web Service.

2- Android Application, How to Login with Email and Password with Live SQL Database. 

 Youtube Link    GitHub Project 1 .  GitHub 2

Will have  2 Activities and Layouts. 

1- Main Activity or Home Activity this will be opened if the result of login True.

2* Login Activity, this one will have 2 EditText for Email and Password,

and sure one Button For Sign In. 

Let's Start our Android Application with creating a new project.

New Project

- Choose a name for your project.

-  Will Generate New Empty Activity and Layout.

So, this one will Be Home Activity as I mention it will open if the Email and Password True.

You can create any Text View and write in it Welcome or Hello World :).

-Let's create one more Activity and call it Login Activity, this will be for the main job.

 

 

part 2

 

Read more..
On
Initialize AngularJS in HTML page
by

السلام عليكم ورحمة الله وبركاته .

اليوم سنحاول اكمال سلسلة AngularJS  . 

في هذا المقالة سنتحدث على طرق تهيئة صفحة الويب , كي تكون جاهزه او قابلة لقراءاة كود Angular  .

هناك ثلاث طرق , من اجل تعريف Angular في تطبيقك .

الطريقة الاولى يتم التهيىة بشكل اتومتيكي , وهي الطريقة الاسهل .

اما الطريقة الثانية وهي ايضا بشكل اوتومتيكي , لكن اصعب بالتعامل من الطريقة الاولى .

الطريق الثالثة وهي الاصعب , ويتم كل شي فيها بشكل يدوي . 

سوف نتعرف على كل طريقه على حدها , والتعرف متى يجب ان نختار اي طريقة مناسبة لمشروعنا .

ملاحظة:

الشي الموجود في كل الطرق هو اضافة او تضمين ملف AngularJS  من الموقع الرسمي, كرابط CDN  او تحميل نسخة منه على جهازك .

 

الطريقة الاولى :

في هذه الطريقة يتم فقط اضافة ng-app  في ترويسة الصفحة بالتحديد في اول Tag  , كما في التالي 

<HTML ng-app>

ويتم تعرف الــ Controller  كتابع ضمن كود JAVASCRIPT  , كما التالي :

<script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>

Code:

<html ng-app>
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثانية : 

في الطريقة الثانية يتم اعطاء قيمة لــ ng-app  من خلال كود الجافاسكريب بستخدام 

 

Angular.modile 

اسم الكنترولر , يتم تعريفه ايضا كاسم تابع في جافاسكريبت Controller()  .

 

كود :

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
 angular.module('Test',[]).controller('HelloWorld',function HelloWorld($scope){
        $scope.text="World";
    });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثالثة :

من الاعتياد ان يكون هناك تطبيق Angular  واحد  في صفحة HTML  , لكن اذا اردت ان يكون هناك اكثر من تطبيق Angular  في صفحة واحده ,

تحتاج لاستخدام طريقة BootStrap في تهيىه مشروعك بشكل يدوي .

 

كود :

 

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
  angular.element(document).ready(function(){
      angular.module('Test',[]).controller('HelloWorld',function($scope){
          $scope.text='World'
      });
      angular.bootstrap(document,['Test']);
  });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

 

 

Read more..
On
Angular First App
by

السلام عليكم ورحمة الله وبركاتة .

المقالة التالية سوف نتحدث عن منصة Angular  , التي لقت رواج كبير من قبل المبرمجين , لما تقدمة من ميزات وسهوله ديناميكي في العمل .

طبعا هي احد منصات TypeScript  , التي تساعدنا في برمجة صفحات الويب  مثل (JavaScript , jQuery ….) ,و الكثير .

الاصدار الحالي هو Angular 4  ,

سوف نتعرف اكثر على محتواها وميزاتها بمثال صغير .

طبعا كما قلنا هي JavaScript Framework   .

يتم تعريفها على النحو التالي , في راس الصفحة يتم اضافة الـــ CDN  , من موقع Angular  .

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

االخطوة التالية , وهي تعرف الجزء الدي سيعمل على Angular  , على سبيل المثال

<div ng-app="">
   </div>

يجب اضافة ng-app=""  حتى يتم التعرف عليها من قبل Angular     .

يتم اضافة نص , من اجل ادخال الاسم كما التالي :

 <p>Name: <input type="text" ng-model="name"></p>

 مع ذكر  ng-model="name"  , الذي يعتبر كمرجع للقراءه منه في ما بعد .

وايضا يتم اضافة <p> لعرض محتوى صندوق النص name  .

<p ng-bind="name"></p>

يدل الكود السابقة للـ p  على انها تعمل bind  من name  التي هي من نوع Text  .

الكود كامل :

 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

 االناتج :

 

Read more..
On
jQuery Ajax ASP.NET MVC GET/Post Part 2 عربي
by

مره اخرى مع JQuery AJAX ASP.NET MVC   .

اليوم سوف نتحدث في المقالة التالية عن POST  . 

وكيف يتم استخدامها في ASP.NET MVC  .

POST

الشكل العام :

.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

هي على عكس Get  التي كانت تجلب البيانات من مكتن معين (قاعدة بيانات الخ..).

Post  ترسل البيانات إلى مكان محدد من صفحة الويب . 

الكوج التالي هو كود ارسال Name and Address  بشكل وهمي من ادارء إلى اخرى , عبر التابع التالي .

[HttpPost]
public string Submit(string Name, string Address)
{
    if (!String.IsNullOrEmpty(Name) && !String.IsNullOrEmpty(Address))
        //TODO: Save the data in database
        return "Thank you " + Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

بعد التاكد من عدم ارسال بيانات فارغه . يتم اظهار الرسالة التالية :

Thank you   Name  . Record Saved.

وفي حال كان لا يوجد بيانات , تظهر رساله تطلب بادخالها :

Please complete the form.

 

الكود التالي من اجل صفحة الويب :

 

<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
 
<script type="text/javascript">
    $('#Save').click(function () {
        var url = "Subscription";
        var name = $("#Name").val();
        var address = $("#Address").val();
        $.post(url, { Name: name, Address: address }, function (data) {
            $("#msg").html(data);
        });
    })
</script>

لنحاول هذا المره , ان يكون الكود اكثر احترافيه .

ونستخدم Form  . كما في الشمل التالي : 

يجب علينا تعريف الحقول التاليه و في كلاس منفصل .

public class Subscription
{
    public string Name { get; set; }
    public string Address { get; set; }
}

 

والتعديل على الكود , ليستقبل من كلاس Subscrption  , .

[HttpPost]
public string SubmitSubscription(Subscription subs)
{
    if (!String.IsNullOrEmpty(subs.Name) && !String.IsNullOrEmpty(subs.Address))
        //TODO: Save the data in database
        return "Thank you " + subs.Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

 

كود الويب سكون مختلف قليلا , حيث انه سيتم استخدام From  كما في الشكل التالي :

<form id="subscriptionForm" action="/Home/SubmitSubscription" method="post">
<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
</form>
 
@section Scripts{
    <script type="text/javascript">
        $('#Save').click(function () {
 
            var form = $("#subscriptionForm");
            var url = form.attr("action");
            var formData = form.serialize();
            $.post(url, formData, function (data) {
                $("#msg").html(data);
            });
        })
    </script>
}
 

تم اعطاء الفورم اسم subscriptionForm   حتى يسهل قراءة البيلنات منه في كود الجافا سكريبت .

لن يختلف شي عندي في وقت التنفيذ والناتج كما في الكود السابق . 

لكن هذه الطريقه جيدة من اجل قواعد البيانات ....

 

وشكرا ...

Read more..
On