ド素人が作りました。 SNS(ソーシャルネットワーク)編 No4
を使ってログイン出来るようにしたい!
しかしプラグインを探してみたんですが、
word Press用しか見つかりませんので、
メールアドレスで新規登録してIDとパスワード
を発行しようとおもいます。
メールアドレス入力FOAMのサンプルプログラムです!!
このメールアドレスに仮ユーザーIDを発行します。
email_form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
<title>ログイン</title>
</head>
<body>
<form action="/index.php" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="email_regist" />
<table><caption>新規会員登録</caption>
<tr>
<td class="item">E-mail:</td>
<td><input type="text" name="email" size="30" /></td>
</tr>
</table>
<div><input type="submit" name="submit" value="登録" /></div>
</form>
<form action="/index.php" method="post" enctype="multipart/form-data"><input type="hidden" name="mode" value="login" />
<table><caption>ログインページ</caption>
<tr>
<td><div><input type="submit" name="submit" value="ログイン" /></div></td>
</tr>
</table>
</form>
</body>
</html>
email_regist.php
<?php <?php // フォームからメールアドレスを取得$email = $_POST["email"];
// エラーメッセージ配列$error = array();
// データベースに接続 require_once("db.php");
// メールアドレス入力チェック if($email == "") { //未入力の場合、エラーを返す //エラー配列に値を代入
array_push($error, "メールアドレスを入力してください。"); // エラー配列に値を代入} else { $pre_user_id = uniqid(rand(100,999)); //$pre_user_id = sha1( uniqid( mt_rand() , true ) );
$onoff = "off" ;
//SQL文を発行 $query = "insert into member (pre_userid,mailadr,onoff) values ('$pre_user_id','$email','$onoff')"; $result = mysql_query($query);
// データベース登録チェック if($result == false) { array_push($error, "データベースに登録できませんでした。"); //エラー配列に値を代入 } else {
// 取得したメールアドレス宛にメールを送信 mb_language("japanese"); mb_internal_encoding("SJIS");
$to = $email; $subject = "会員登録URL送信メール"; $message = "以下のURLより会員登録してください。\n". "http://hogehoge/index.php?pre_userid=$pre_user_id"; $header = "From:hogehoge@hatena";
if(!mb_send_mail($to, $subject, $message, $header)) { //メール送信に失敗したら array_push($error,"メールが送信できませんでした。<a href='http://hogehoheappli.com/index.php?pre_userid=$pre_user_id'>遷移先</a>"); //エラー配列に値を代入 } }}
//エラーがあるかないかによって表示の振り分け($error配列の確認)if(count($error) > 0) { //エラーがあった場合 /*エラー内容表示*/ foreach($error as $value) {?><table> <caption>メールアドレス登録エラー</caption> <tr> <td class="item">Error:</td> <td><?php print $value; ?></td> </tr></table><?php } //foreach文の終了} else { //エラーがなかった場合 ?><table> <caption>メール送信成功</caption> <tr> <td class="item">送信メールアドレス</td> <td><?php print $email ?></td> </tr></table><?php}?>
メールで送信されたURIにアクセスしてユーザー情報を入力するFORMの
サンプルプログラムです。
regist_form.php
<?php<?php//pre_useridの値を取得if($mode == "regist_form") { $pre_userid = $_GET['pre_userid'];}
// pre_userid 有効チェック$errorFlag = true;
// データベース接続設定 require_once("db.php");
//取得したユニークIDをキーに登録されたメールアドレスを取得 $query = "select mailadr from member where pre_userid = '$pre_userid'";$result = mysql_query($query);
//データベースより取得したメールアドレスを表示if(mysql_num_rows($result) > 0) { //取得した結果のデータの数が0以上なら → データが取得できた //データが正常に取得できた $errorFlag = false; $data = mysql_fetch_array($result); $email = $data['mailadr'];}
if($errorFlag) { // pre_useridが無効?><table> <caption>メールアドレス登録エラー</caption> <tr> <td class="item">Error:</td> <td>このURLは利用できません。<br>もう一度メールアドレスの登録からお願いします。<br> <a href="index.php">会員登録ページ</a></td> </tr></table><?php} else { // pre_useridが有効 // regist_confirmでのエラー表示 if(count($error) > 0) { foreach($error as $value) { print $value."<br>"; } }?><form method="post" action="/keirin/index.php"> <input type="hidden" name="mode" value="regist_confirm"> <input type="hidden" name="pre_userid" value="<?php print $pre_userid; ?>"> <table> <caption>会員情報登録フォーム</caption> <tr> <td class="item">ユーザーID:</td> <td><input type="text" size="30" name="input_userid" value="<?php print $input_userid; ?>"> ※ 半角英文字または数字</td> </tr> <tr> <td class="item">パスワード:</td> <td><input type="text" size="30" name="input_password" value="<?php print $input_password; ?>"> ※ 6文字以上16文字以下</td> </tr> <tr> <td class="item">名前:</td> <td><input type="text" size="30" name="input_name" value="<?php print $input_name; ?>"> ※ 半角英文字または数字</td> </tr> <tr> <td class="item">E-mail:</td> <td><?php print $email; ?><input type="hidden" name="input_email" value="<?php print $email; ?>"></td> </tr> </table> <div><input type="submit" value=" 送 信 "></div></form><?php}?>
regist_confirm.php
<?php<?php//入力フォームからパラメータを取得 $formList = array('mode','input_userid','input_password','input_name','input_email','pre_userid');
//必須項目 $requireList = array('mode','input_userid','input_password','input_name');
//ポストデータを取得しパラメータと同名の変数に格納foreach($formList as $value) { $$value = $_POST[$value];}
// エラーメッセージの初期化 $error = array();
//必須項目入力チェックforeach($requireList as $value) { if($$value == "") { array_push($error,"入力されていない項目があります。"); break; }}
// パスワードチェックif(strlen($input_password) < 6 || strlen($input_password) > 16) { array_push($error,"パスワードは6文字以上16文字以内でお願いします。");}?><div class="error-msg"><?php// エラー 入力フォーム表示 $errorif(count($error) > 0) { require_once("regist_form.php");?> </div><?php} else {?><form method="post" action="/keirin/index.php"> <input type="hidden" name="mode" value="user_regist"> <table> <caption>入力情報確認ページ</caption> <tr> <td class="item">ユーザー名:</td> <td><?php print $input_userid;?><input type="hidden" name="input_userid" value="<?php print $input_userid;?>"></td> </tr> <tr> <td class="item">パスワード:</td> <td><?php print $input_password;?><input type="hidden" name="input_password" value="<?php print $input_password;?>"></td> </tr> <tr> <td class="item">名前:</td> <td><?php print $input_name;?><input type="hidden" name="input_name" value="<?php print $input_name;?>"></td> </tr> <tr> <td class="item">メールアドレス:</td> <td><?php print $input_email;?><input type="hidden" name="input_email" value="<?php print $input_email;?>"></td> </tr> <tr> <td class="item">PREユーザー名:</td> <td><?php print $pre_userid;?><input type="hidden" name="pre_userid" value="<?php print $pre_userid;?>"></td> </tr> </table> <div><input type="submit" value=" 登 録 "></div></form><?php}?>
今日はここまで。
↓こちら完成品ですが、ブログではまだまだ先の事。
ド素人が作りました。 SNS(ソーシャルネットワーク)編 No3
画像を編集できたら、今度は画像をサーバーに送信します。
簡単な方法はサーバーのファイルに画像をそのままUPする方法です、
ランダムにファイル名を生成して画像はサーバーのとあるFILEに格納して、
FILE名をデーターベースに格納します。
データーベースにFILE名を格納しとけば、ユーザーIDをキーにして
いつでも画像を表示できます。
ではサンプルコードをネットで物色してきました。
<?php
$textUpload = "";
if ($_FILES['userfile']):
$uploadfile = __DIR__ . '/uploads/image.jpg';
if (move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile)) {
$textUpload = "File is uploaded";
} else {
$textUplaod = "Upload fail";
}
endif;
if (preg_match('/^text\/html/', $_SERVER['HTTP_ACCEPT'])) :
?>
<pre>
<?php echo $textUpload; ?>
</pre>
<form enctype="multipart/form-data" action="/uploader.php" method="POST">
<input name="userfile" type="file" />
<input type="submit" value="Send" />
</form>
<br />
Current Image:
<img src="/uploads/image.jpg?<?php echo time(); ?>" width="400">
<br />
<a href="/uploader.php"> REFRESH </a>
<?php else:
header( 'Content-Type: application/json; charset=utf-8', true );
echo json_encode( array("message" => "Upload is OK") );
endif; ?>
今日はここまで。
↓こちら完成品ですが、ブログではまだまだ先の事。
ド素人が作りました。 SNS(ソーシャルネットワーク)編 No2
画像を処理を習得するためにネットでサンプルソースコードを物色しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0">
<title>画像処理サンプル</title>
<script src="megapix-image.js"></script>
<script src="pixastic.custom.js"></script>
<script>
function change(selector){
var file = selector.files[0];
var canvas = document.getElementById("canvas");
new MegaPixImage(file).render(canvas, { width : 320});
}
function filter(name){
var canvas = document.getElementById("canvas");
if(name == "noise") {
Pixastic.process(canvas, "noise", {mono:true,amount:1 ,strength:1});
} else {
Pixastic.process(canvas, name);
}
};
function output(){
var original = document.getElementById("canvas");
var newCanvas = document.createElement("canvas");
newCanvas.width = original.width;
newCanvas.height = original.height;
var newContext = newCanvas.getContext("2d");
newContext.drawImage(original, 0, 0, original.width, original.height);
var img = new Image();
img.src = newCanvas.toDataURL('image/jpeg');
img.onload = function(){
location.href = img.src;
};
}
function revert() {
var canvas = document.getElementById("canvas");
Pixastic.revert(canvas);
}
</script>
</head>
<body>
<div style="background-color:#ddddff;">
<input type="file" accept="image/*" capture="camera" id="selector" onchange="change(selector)"/>
</div>
<div>
<canvas id="canvas"/>
</div>
<div style="background-color:#ddffdd;">
<input type="button" value="セピア" onclick="filter('sepia')"/>
<input type="button" value="ノイズ" onclick="filter('noise')"/>
<input type="button" value="反転" onclick="filter('solarize')"/>
<input type="button" value="横反転" onclick="filter('fliph')"/>
</div>
<div style="background-color:#ffdddd;">
<input type="button" value="出力" onclick="output()"/>
<input type="button" value="戻す" onclick="revert()"/>
</div>
</body>
</html>
このあとでサーバーにUPすれば良いかな?
今日はここまで。
ド素人が作りました。 SNS(ソーシャルネットワーク)編 No1
40代のサラリーマンの私がSNSサービスを作ろうと頑張りました。
切っ掛けは映画「ソーシャルネットワーク、マーク・エリオット・ザッカーバーグ」
です、彼の様になりたいと思い自分の手でSNSサイトを自分の手でプログラミングしてみようと思いました、
もともとプログラミングに興味がありビジュアルBASICで業務プログラムを作った事がありましたので、
少し勉強すれば直ぐに出来ると甘くみてました。
WEBサービスならPHPで作られているのがほとんどだと言う情報を掴んだので、PHPの勉強を始めました、
PHPはサーバーで動くので、まずはレンタルサーバーを借りる事にしました。
たまたまパソコンを開くと広告にレンタルサーバーのを見つけたので「さくらインターネット」
そこのスタンダードプランを契約しました。
PHPの習得には「最初に読む PHP」ソシム社 と PHPポケットリファレンス、技術評論社を使いました、
本を読みながらテキストノートにコードを書きサーバーにUPしてパソコンで開いて動きを見ながら又、
テキストでコードを書きの繰り返しです、スペースが全角になっただけでエラーで動作しません!!
最初は何故エラーかも分らずにいましたが、慣れると大丈夫です。
FACEBOOKの機能を全部入ってるSNSにしたいので、画像を扱わなくてはいけないので・・・
今日はここまで。