JS HTML C# CSS בניית אתרים ועוד

יום ראשון, 7 ביוני 2015

מתחילים עם Angular.js

טוב, אחרי שברחתי מללמוד Angular.js הגעתי למסקנה שפשוט חייבים להתחיל. אני מנהל פוסטים לסיכום הלמידה, לכן זו אחריות הקורא בלבד להסתמך על האמור...
אין לי כוח לקרוא באנגלית, אז ברשת בעברית יש שני פוסטים מצוינים להתחיל, וידאו עם הסבר פשוט, והמון פוסטים מתקדמים מאוד

לאחר שייבאנו לפרויקט את הקובץ JS (ששוקל 129KB ...), אפשר להתחיל לעבוד:

אגב, במידה ולא נוסיף את הקובץ JS ונתחיל לקמפל - נקבל את השגיאה הבאה:

Uncaught ReferenceError: angular is not defined

דבר ראשון, ניצור את הinjector [כנראה זה המחולל של הקסם], איך? יש כמה אפשרויות:
א. להגדיר אותו בתגית הHTML או בתגית הBODY.
נתחיל לכתוב ng-app, כל ng מורה לJS שזו פקודה של אנגלר, אם נרצה להיות תקניים אז נכתוב data-ap-app באופן שכזה:

אפשר לקרוא לקובץ בצורה ידנית.

מיד לאחר שבנינו את הקריאה - נבנה את האיבר בJS:

var angular = ....

בשביל ההדגמה נבנה tamplate שמיועד לשימוש חוזר. שהאנגולר יקרא לו ויבצע הזרקה של הנתונים אל התבנית.

יום חמישי, 21 במאי 2015

הוספת helper לקבצי CSHTML

ראשית נריץ את הפרוייקט, נקבל בכתובת של הדף משהו כזה:

http://localhost:10707/

כדי להוסיף את האפשרות להוסיף HELPER לדף, נכנס לממשק הניהול:

http://localhost:10707/_Admin

לאחר בחירת הסיסמא, וכתיבת הסיסמא בפעם השנייה, נקבל הודעה כזו

For security reasons your password hash is saved in a file named _Password.config in the /App_Data/Admin/ folder of your website. To fully enable site administration, rename the file to Password.config by removing the underscore (_) character from the file name. If this is the first time you are seeing these instructions and you have not yet created a password, then remove the /App_Data/Admin/_Password.config file. This will remove a previously created password and allow you to create your own password

שבעצם מספרת לנו שהכל הפיך, וגם אם נשכח את הסיסמא נוכל למחוק את הקובץ שמכיל את הסיסמא מתוך הפרוייקט ולעשות חדשה.

כרגע יתווסף לנו קובץ /App_Data/Admin/_Password.config

נשנה את שם הקובץ (לחיצה על F2), ונמחק את הקו תחתון. כעת במידה ונכנס לדף בשנית, נכתוב סיסמא, והופ...

נקבל ממשק להוספת קבצי DLL. מתוך תפריט הONLINE נוכל לבחור את החבילה ASP.NET Web Helpers Library

יום חמישי, 8 בינואר 2015

הוספת ערכים למחלקה בלולאת Foreach

נגדיר מחלקה פשוטה:

public master()

{ }

public int Id { get; set; }

public string Title { get; set; }

עכשיו נניח אנחנו רוצים ליצור מופע למחלקה ולהכניס ערכים.

פשוט:

master MASTER = new master();

MASTER.Id = 1;

MASTER.Title = "blabla";

במידה וקיבלנו אובייקט אחרnew_MASTER שגם מכיל את המאפיינים ID, Title. נוכל לעשות השוואה בין המופעים, ולעדכן את הערכים.

MASTER.Id = new_MASTER.Id;

MASTER.Title = new_MASTER.Title;

כל זה מקסים, כאשר: 1. יש לי קצת ערכים 2. אני יודע מהם. אך במידה וקיבלתי שתי מחלקות גדולות לא ייתכן לכתוב:
שורה א שווה לשורה א במופע החדש, שורה ב שווה לשורה ב במופע החדש. וגם במידה ולא ידוע לי המאפיינים של המחלקה, אז מה נכתוב?

MASTER.??? = ?

בשביל לבצע השמה של מחלקה לתוך מחלקה נשתמש בלולאת foreach שתעבור על כל המחלקה, ותקבל כל שם מאפיין בנפרד, ותבצע השמה לתוך המאפיין בתוך המחלקה הראשית:

Type type = MASTER.GetType();

foreach (var item in new_MASTER.GetDynamicMemberNames())

{

System.Reflection.PropertyInfo prop = type.GetProperty(item); //name item

prop.SetValue(MASTER, new_MASTER[item], null); // value item to MASTER

}

יום שלישי, 23 בדצמבר 2014

חיבור האתר לפייסבוק

לאחר החיבור האתר לפייס נוכל לקבל פרטים של המשתמש: ID בפייס, תמונה, כינוי, שם פרטי.
רוצים לנסות?
כנסו לAPI של פייסבוק ותקבלו את התשובות בJSON
תוכלו לרשום שם לדו' את מספר משתמש: 851080087
נקבל את כל הפרטים שהמשתמש הזה אישר שיהיו ציבוריים. לדו':

{
  "id": "851080087",
  "first_name": "Swapnil",
  "last_name": "Patil",
  "link": "https://www.facebook.com/app_scoped_user_id/10154995541255088/",
  "name": "Swapnil Patil",
  "updated_time": "2014-08-24T03:53:08+0000"
}

בשביל לבצע הטמעה של התמונה של המשתמש הזה, נוכל בקלות לקבל את התמונה שלו, על ידי המחרוזת הבאה:

http://graph.facebook.com/851080087/picture?type=small

נוכל לבקש את התמונה, בגדלים שונים: small, normal, large, square.

החיבור לאתר לפייסבוק יכול להתבצע על ידי שתי אפשרויות:

ראשית, בשביל לבצע חיבור לאחר שנבצע הרשמה באתר של פייסבוק של האפליקציה שלנו (פשוט ללכת אחרי ההוראות בכתובת הזו), נבחר את הכתובת שבה אנחנו מתחברים באתר שלנו לפייסבוק (במידה וכרגע אנחנו עובדים בלוקל הוסט - פשוט נכתוב זאת כך), כי הפייס מבצע התאמה מלאה בין הכתובת שנשלחת בעת ההתחברות באתר לבין ההגדרות של בעל האתר.

1. ניתן להעתיק את הקוד שאתר של הפייסבוק מציג
בממשק ניתן לשנות את הכפתור: גודל, שורות, חיבור של החברים שאהבו את זה.

הבעיה הרצינית בסיפור הזה, שמחד זה מאוד פשוט להטמיע ולהשתמש. אבל! החיבור מבצע POSTBACK, ואם ביצענו שינויים ברמת הקליינט הם יעלמו לאחר החיבור. אפשר לבצע פתיחת חלון חדש להתחברות, ואז ממש לא משנה הPOSTBACK.

2. אפשר לכתוב קוד שיבקש אישור מהמשתמש לקבל את הפרטים שלו. לשם כך צריך לבקש מהמשתמש במידה והוא מאשר את הפרטים שאותם אנחנו רוצים לקבל ממנו. נקבל Access Token שהוא אישור כניסה שניתן לאחר התחברות בפקודת JS הבאה:

var accessToken = response.authResponse.accessToken;

בשביל לחוש את הדברים שוב נכנס לAPI של הפייסבוק, והפעם נעשה get access token ונקבל המון מידע.

דוגמא לקוד זה נמצא פה. או גירסא דומה:

התחבר עם פייסבוק

</div>

בשביל להבין את הדברים היטב, צריך להבין שלאחר האישור הראשוני, כל כניסה אל האתר מאושרת אוטומטית.לכן בעת הכניסה בפעם הבאה מיד נקבל את כל הפרטים שנדרוש מהפייסבוק על סמך האישור שניתן פעם. אם נרצה לבטל את האישור לאתר נצטרך בהגדרות של פייסבוק האישי לבטל את החיבור. ביצוע LOGOUT ינתק את המשתמש מהאתר, וגם מהפרופיל שלו! הוא יצטרך בכניסתו לפייסבוק לבצע כניסה מחדש.

קוד באתר שמבצע הכנסה של תמונה אוטומטית. המחשב מזהה שהמשתמש מחובר לפרופיל שלו לפייסבוק לוקח את הID ומציג את התמונה באתר.
ראשית, נוסיף לאתר DIVfb-root שעליו בונה הפייס את ההגדרות שלו, במידה ולא נוסיף פקודות הJS של הפייס יעשו זאת בעצמם, ואת הDIV toolBar שבו תופיע התמונה

window.fbAsyncInit = function () {

FB.init({

appId: '****************', // App ID

scope: 'id,name,gender,email,user_birthday',

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

frictionlessRequests: true,

version: 'v2.2', // use version 2.1

xfbml: true // parse XFBML

});

FB.Event.subscribe('auth.statusChange', function (response) {

//alert(response.status + " Event");

if (response.status == 'connected') {

// user has auth'd your app and is logged into Facebook

FB.api('/me', function (me) {

if (me.name) {

LoadImgUser(me);

}

})

} else if (response.status === 'not_authorized') {

// The person is logged into Facebook, but not your app.

// user has not auth'd your app, or is not logged into Facebook

} else {

// The person is not logged into Facebook, so we're not sure if they are logged into this app or not.

}

});

};

// Load the SDK asynchronously

(function (d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) { return; }

js = d.createElement(s); js.id = id;// js.async = true;

js.src = "//connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

function LoadImgUser(me) {

////add to client

var toolBar = document.getElementById("toolBar");

img = document.createElement('img');

img.src = "http://graph.facebook.com/" + me.id + "/picture?type=small";

img.id = "profileImg";

toolBar.appendChild(img);

}

דוגמא לLOGOUT, שתי הדוגמאות מבצעות את אותה פעולה, ניתוק המשתמש אפילו מהפרופיל שלו:

function logoutFB() {

window.location = "https://www.facebook.com/logout.php?next=" + url + "&access_token=" + accessRes.accessToken;

FB.logout(function (response) {//log out olso user

// user is now logged out

}); }

את הנתון accessToken שמרנו בעת ההתחברות אל הדף

יום רביעי, 22 באוקטובר 2014

יצירת SiteMap.xml מתוך DB

לאחר יצירת דף XML בROOT של האתר, הקוד ישאב את שמות הכתבה והתאריך יצירה שלהם מהנתונים בDB (לאחר שיוסיף להם את הכתובת של האתר והסיום aspx)

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Xml;

/// <summary>

/// Summary description for siteMap

/// </summary>

public class siteMap

{

public siteMap() {}

public class nodeXmlSiteMap{

private string _loc = "http://www.mysite.co.il/";

public string loc { get { return _loc; } set { value = value + ".aspx"; _loc = value; } }

private string _priority = "1.0";

public string priority { get {return _priority; } set {_priority = value; } }

private string _changefreq = "Monthly";

public string changefreq { get { return _changefreq; } set { _changefreq = value; } }

private string _lastmod = String.Format("{0:yyyy-MM-dd}", DateTime.Now);

public string lastmod {get {return _lastmod;} set { _lastmod = value; }

}

public void createFileSiteMap() {

XmlTextWriter writer = new XmlTextWriter(HttpRuntime.AppDomainAppPath + "sitemap.xml", System.Text.Encoding.UTF8);

writer.WriteStartDocument(true);

writer.Formatting = Formatting.Indented;

writer.Indentation = 4;

writer.WriteStartElement("urlset", "http://www.sitemaps.org/schemas/sitemap/0.9 ");

writer = getDataFromDB(writer);

writer.WriteEndElement();

writer.WriteEndDocument();

writer.Close();

}

private XmlTextWriter getDataFromDB(XmlTextWriter writer)

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);

SqlCommand cmd;

try

{

cmd = new SqlCommand("SELECT UrlArticle,DateArticle FROM Article");

cmd.Connection = con;

cmd.CommandType = System.Data.CommandType.Text;

con.Open();

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

nodeXmlSiteMap url = new nodeXmlSiteMap();

url.loc = url.loc + dr[0].ToString();

// url.priority ="1.0";

//url.changefreq = "Monthly";

DateTime _myDate = new DateTime();

_myDate = (DateTime)dr[1];

url.lastmod = String.Format("{0:yyyy-MM-dd}", _myDate);

createNode(url, writer);

}

con.Close();

}

catch (Exception ex)

{

}

return writer;

}

private void createNode(nodeXmlSiteMap url, XmlTextWriter writer)

{

writer.WriteStartElement("url");

writer.WriteStartElement("loc");

writer.WriteString(url.loc);

writer.WriteEndElement();

writer.WriteStartElement("lastmod");

writer.WriteString(url.lastmod);

writer.WriteEndElement();

writer.WriteStartElement("changefreq");

writer.WriteString(url.changefreq);

writer.WriteEndElement();

writer.WriteStartElement("priority");

writer.WriteString(url.priority);

writer.WriteEndElement();

}