LAB 11 Programação em JavaScript, JQuery, e AJAX

LAB 11 Programação em JavaScript, JQuery, e AJAX Assume-se aqui que já realizou com sucesso o LAB9 e LAB10 Faça uma cópia da pasta LAB9_10 para a pasta LAB11 a12345@daw:~/public_html$ cp -R LAB9_10 LAB11 Actualize a variavel base_url no ficheiro configphp 1 a12345@australia:~/public_html/lab11/application/config$nano configphp $config['base_url'] = '/~a12345/lab11 ; Actualize as permissões na pastas templates_c a12345@daw:~/public_html/lab11/application/views$ chmod g+rw templates_c FUNCIONALIDADE REPLY TO POST 1 Adicione a tabela replies à sua base de dados a12345@daw:~$mysql -u a12345 -p -h 101023183 db_a12345 mysql> CREATE TABLE `replies` ( `id` int(11) NOT NULL AUTO_INCREMENT, `content` text CHARACTER SET utf8 COLLATE utf8_bin, `user_id` int(11) DEFAULT NULL, `micropost_id` int(11) DEFAULT NULL, `created_at` datetime NOT NULL, PRIMARY KEY (`id`), CONSTRAINT FOREIGN KEY (`user_id`) REFERENCES `users` (`id`), CONSTRAINT FOREIGN KEY (`micropost_id`) REFERENCES `microposts` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 Nota: se desejar pode realizar o comando utilizando a interface web em http://alldeeifctualgpt/phpmyadmin 2 Actualize o template index_templatetpl que foi realizado no LAB9, de forma a ter o link 1 Nota: se modificou o ficheiro htaccess, terá que actualizar também a RewriteBase no ficheiro LAB11/htaccess: RewriteBase /~a12345/lab11 LabJavaScript 1/10

<a href="$post_url$blogid">update blog</a> com o texto update blog se o utilizador que fez log in é o autor do post (já existente) com o texto reply to blog se o post não pertence ao utilizador (novidade) Actualize o método index()no ficheiro que define a classe do controlador (public_html/lab11/application/controllers/blogphp) de forma a garantir que em ambos os casos href seja http://alldeeifctualgpt/~a12345/lab11/indexphp/blog/post/xx Utilize as funções base_url() ou site_url() para garantir que o seu site é portável 3 Actualize o método post dentro do ficheiro que define a classe do controlador (public_html/lab11/application/controllers/blogphp) Para: Retornar o template blog_templatetpl novamente, em caso do seu preenchimento estiver vazio (já existente) Chamar o método blog_model->new_blog() caso nenhum blog_id seja transmitido no URL (já existente) Chamar o método blog_model->update_blog($blog_id) caso o utilizador que fez login seja o autor do post (já existente) Chamar o método blog_model->new_reply($blog_id)caso o utilizador que fez login não seja o autor do post (novidade) LabJavaScript 2/10

O template blog_templatetpl já foi desenhado no LAB10, mostra-se aqui novamente public function post($blog_id = FALSE) if ($blog_id) $tupple = $this->blog_model->get_blog($blog_id); $data['content'] = $tupple->content; $data['blog_id'] = $blog_id; $this->load->library('form_validation'); if ($this->form_validation->run() === FALSE) $data['form_validation']=validation_errors(); $this->smarty->view('blog_templatetpl', $data); else if ($blog_id and ($_SESSION['id'] == $user_id) ) $this->blog_model->update_blog($blog_id); elseif ($blog_id and ($_SESSION['id']!= $user_id) ) else $this->blog_model->new_blog(); redirect('/blog'); LabJavaScript 3/10

4 Construa o método new_reply($blog_id) dentro do ficheiro que define os métodos de acesso à base de dados (public_html/lab11/application/models/blog_modelphp) public function new_reply($blog_id) 5 Construa o método get_replies($id) public function get_replies($id) $sql="select where repliesmicropost_id=" $id " order by repliescreated_at desc"; $query = $this->db->query($sql); return $query->result_array(); Utilize a nova funcionalidade do site para introduzir post replies em posts de outros utilizadores (em alternativa coloque manualmente algumas replies acedendo directamente à base de dados) 6 Actualize novamente o template index_templatetpl e o método index()para que em todos os posts em que tenha havido replies estes apareçam imediatamente a seguir ao post respectivo: Esta funcionalidade exige a realização de dois nested loops : um loop exterior ( posts ), e um loop interior ( replies ), funcionalidade trivial se fosse permitido neste laboratório quebrar o paradigma MVC e utilizar código PHP no template Não sendo permitido utilizar código PHP no template existem duas hipóteses: O controlador index() associa os dois arrays num só array; neste caso pode-se continuar a usar a função Smarty foreach no template O controlador index() passa dois arrays distintos ao template * ; neste caso é necessário utilizar a função section com o seguinte controlador associado: * apresenta-se um extracto do template na secção 10 deste guião LabJavaScript 4/10

public function index() $data['blogs'] = $this->blog_model->get_posts(); for($i=0; $i<count($data['blogs']); $i++) $blog_replies[$i] = $this->blog_model->get_replies($data['blogs'][$i]['id']); $data['replies'] = $blog_replies ; O resultado deve ser o seguinte screenshot (ou equivalente) * : FUNCIONALIDADE SHOW/HIDE REPLIES COM JAVASCRIPT/JQUERY 7 Actualize novamente o template index_templatetpl e introduza um button no template <button id="b$blogs[bl]id" onclick="mytoggle('$blogs[bl]id')">show</button> Utilizando JavaScript ou a livraria JQuery construa a função mytoggle(id) <script> function mytoggle(id) </script> * A seccção 10 mostra o código do template index_templatetpl LabJavaScript 5/10

que alternando clicar no botão mostra ou esconde as replies de um determinado post, como se mostra em seguida Replies escondidas: Replies visíveis Teste o funcionamento do botão Considere esta secção do laboratório concluída quando obtiver a mesma funcionalidade do site http://alldeeifctualgpt/~a999993/ci_exame2/blog FUNCIONALIDADE SHOW/HIDE REPLIES COM AJAX 8 Faça uma cópia da pasta LAB11 para a pasta LAB11A a12345@australia:~/public_html$ cp -R LAB11 LAB11A LabJavaScript 6/10

Actualize a variavel base_url no ficheiro configphp * a12345@australia:~/public_html/lab11a/application/config$nano configphp $config['base_url'] = '/~a12345/lab11a; Actualize as permissões na pastas templates_c a12345@australia:~/public_html/lab11a/application/views$ chmod g+rw templates_c 9 No método index() remova a funcionalidade de acesso à tabela de queries public function index() $data['blogs'] = $this->blog_model->get_posts(); for($i=0; $i<count($data['blogs']); $i++) $blog_replies[$i] = $data['replies'] = $blog_replies ; 10 No template index_templatetpl remova o loop interior (se quiser pode voltar a implementar o loop exterior com a função foreach): <div id="d$blogs[bl]id" style="display:none;"> section name=rpl loop=$replies[bl] <div class="w3-card-4"> <div class="w3-khaki" style="text-align:left;"> $replies[bl][rpl]name posts: $replies[bl][rpl]total </div> <div class="w3-container"> <p>$replies[bl][rpl]content<p> </div> <div class="w3-khaki" style="text-align:left;"> $replies[bl][rpl]created_at </div> </div> <br> LabJavaScript 7/10

/section </div> 11 Construa o método replies($id) public function replies($id) $data['replies'] = this->blog_model->get_replies($id)); $this->smarty->view( 'replies_templatetpl', $data ); 12 Construa o template replies_templatetpl Este template contem uma função Smarty foreach e gera o código HTML necessário para mostrar todas as replies a um determinado post (no caso de zero replies gera rigorosamente nada) Nota: este template não é um documento HTML completo! 13 Utilizando JavaScript ou a livraria JQuery construa a função mytoggle(id) <script> function mytoggle(id) </script> Esta função é uma função AJAX: Se o botão de um determinado post disser Show O botão passa a dizer Hide É feito um GET ao URL base_url(blog/replies/id) Nota: este GET é apenas feito uma vez para um determinado id! A <div> que se encontra escondida (style="display:none;") passa a ser visivel (style="display:block;") e o seu conteúdo é preenchido com a resposta ao GET LabJavaScript 8/10

Se o botão de um determinado post disser Hide O botão passa a dizer Show A <div> que se encontra visivel (style="display:block;") passa a estar escondida (style="display:none;") Teste o funcionamento do botão Considere o laboratório concluído quando obtiver a mesma funcionalidade do site http://alldeeifctualgpt/~a999993/ci_exame2a/blog REFERÊNCIAS: http://alldeeifctualgpt/~a999993/ci_exame2/blog http://alldeeifctualgpt/~a999993/ci_exame2a/blog https://wwwsmartynet/docs/en/ https://wwww3schoolscom/js/defaultasp https://wwww3schoolscom/jquery/defaultasp https://wwww3schoolscom/js/js_ajax_introasp https://wwww3schoolscom/jquery/jquery_ajax_introasp LabJavaScript 9/10

ANEXO 1 : estrutura da base de dados A estrutura da base de dados pode ser consultada em http://alldeeifctualgpt/phpmyadmin CREATE TABLE `users` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) default NULL, `email` varchar(255) default NULL, `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL, `password_digest` varchar(255) default NULL, `remember_digest` varchar(255) default NULL, `admin` tinyint(1) default NULL, `activation_digest` varchar(255) default NULL, `activated` tinyint(1) default NULL, `activated_at` datetime default NULL, `reset_digest` varchar(255) default NULL, `reset_sent_at` datetime default NULL, PRIMARY KEY (`id`), UNIQUE KEY `index_users_on_email` (`email`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `microposts` ( `id` int(11) NOT NULL auto_increment, `content` text, `user_id` int(11) default NULL, `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL, PRIMARY KEY (`id`), CONSTRAINT FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `replies` ( `id` int(11) NOT NULL AUTO_INCREMENT, `content` text CHARACTER SET utf8 COLLATE utf8_bin, `user_id` int(11) DEFAULT NULL, `micropost_id` int(11) DEFAULT NULL, `created_at` datetime NOT NULL, PRIMARY KEY (`id`), CONSTRAINT FOREIGN KEY (`user_id`) REFERENCES `users` (`id`), CONSTRAINT FOREIGN KEY (`micropost_id`) REFERENCES `microposts` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 LabJavaScript 10/10